使用 JQuery 在视图之间切换

我在侧边栏中有一个菜单，用于确定在主要内容中显示哪个视图。

我已经设法使用 JQuery 创建它，但我觉得我在 JQuery 代码中重复了很多。

有没有更简洁的方法来实现这一点，但使其更具可扩展性且更容易添加元素而无需添加到 JQuery 代码？

这是我的小提琴 - https://jsfiddle.net/danjodesigns/9r20sfmb/3/

任何帮助改善这一点将不胜感激。

查询：

$(".settings-btn-1").click(function () {
    $('.settings-menu-btn').removeClass("active");
    $(this).addClass("active");
    $('.settings-view').removeClass("active");
    $('.view-1').addClass("active");
});
$(".settings-btn-2").click(function () {
    $('.settings-menu-btn').removeClass("active");
    $(this).addClass("active");
    $('.settings-view').removeClass("active");
    $('.view-2').addClass("active");
});
$(".settings-btn-3").click(function () {
    $('.settings-menu-btn').removeClass("active");
    $(this).addClass("active");
    $('.settings-view').removeClass("active");
    $('.view-3').addClass("active");
});

HTML：

    <div class="container">

    <div class="settings-sidebar">

        <ul class="settings-menu">
           <li class="settings-menu-btn settings-btn-1 active"><span>Account Details</span></li>
           <li class="settings-menu-btn settings-btn-2"><span>Profile Information</span></li>
           <li class="settings-menu-btn settings-btn-3"><span>Categories</span></li>
        </ul>
    </div>

    <div class="settings-view-placeholder">

        <section class="settings-view view-1 active">
            <h2>Account Details</h2>
            <p>Review and update your account details.</p>
        </section>

        <section class="settings-view view-2">
            <h2>Profile Information</h2>
            <p>View your profile information.</p>
        </section>

        <section class="settings-view view-3">
            <h2>Categories</h2>
            <p>Review and update your store categories. These tags will determine what shoppers your store is suggested to.</p>
        </section>


    </div>

</div>

CSS：

.container {
  display:flex;
  flex-direction:row;
  width:100%;
}

.settings-sidebar {
  background-color:white;
  margin-right:15px;
}

.settings-menu {
  list-style:none;
  padding:0;
  margin:0;
  width:250px;
}

.settings-menu-btn {
  border-bottom:solid 1px #EEEEEE;
  padding:15px;
  cursor: pointer;
}

.settings-menu-btn.active {
  background-color:#191919 !important;
  color:#FFFFFF !important;
}

.settings-menu-btn:hover {
  background-color:#F7F7F7;
}

.settings-view-placeholder {
  background-color:#FFFFFF;
  padding:30px;
  flex-grow:1;
}

.settings-view {
    display: none;
    flex-direction:column;
}

.view-1.active,
.view-2.active,
.view-3.active {
    display: flex !important;
}