Question

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

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

是否有一种更简洁的方法来实现这一点，但使其更易于扩展且易于添加元素而无需添加到JQuery代码中？

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

非常感谢任何帮助改善这一点。

JQuery的：

$(".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;
}

Answer 1

不需要任何有数字的课程 ..您可以使用li课程settings-menu-btn然后您可以使用.index()也不需要{{1}您可以直接使用view-1 , view-2 ...和settings-view

＆＃13;

.eq()

＆＃13;

$("li.settings-menu-btn").click(function () {
    var ThisIndex = $(this).index();
    $('.settings-menu-btn').removeClass("active");
    $(this).addClass("active");
    $('.settings-view').removeClass("active");
    $('.settings-view').eq(ThisIndex).addClass("active");
});

＆＃13;

.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;
}

.settings-view.active {
    display: flex !important;
}

＆＃13;

虽然您不能使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="settings-sidebar"> <ul class="settings-menu"> <li class="settings-menu-btn active"><span>Account Details</span></li> <li class="settings-menu-btn"><span>Profile Information</span></li> <li class="settings-menu-btn"><span>Categories</span></li> </ul> </div> <div class="settings-view-placeholder"> <section class="settings-view active"> <h2>Account Details</h2> <p>Review and update your account details.</p> </section> <section class="settings-view"> <h2>Profile Information</h2> <p>View your profile information.</p> </section> <section class="settings-view"> <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>，但您需要更改

view-1 , view-2 , ...

到

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

Answer 2

您可以使用以下方法重构代码：

$('.settings-sidebar').on('click', '.settings-menu-btn:not(.active)', function() {
  $('.settings-view').eq($(this).index()).add(this).add('.active').toggleClass("active");
});

使用JQuery在视图之间切换

2 个答案:

-jsFiddle