javascript - JQuery 根据单击的菜单项添加/删除类

Question

我正在使用下面的 jquery 来显示/隐藏三个单独的侧边栏。目前该脚本仅将类添加到相关侧边栏，并在再次单击时将其删除。首先，我的脚本似乎不是实现这一目标的最精简的方法，而且我还想确保在任何时候只能激活一个侧边栏。

作为奖励，我还想将 .active 类添加到相关菜单项，只要它应用于关联的侧边栏。

任何帮助非常感谢!

HTML

<nav>
    <ul>
      <li class="artists"><a href="#">Artists</a></li>
      <li class="about"><a href="#">About</a></li>
      <li class="history"><a href="#">History</a></li>
    </ul>
</nav>

<aside class="sidebar artists">
    <li><h3><a href="#">Artist Name</a></h3></li>
</aside>

<aside class="sidebar about">
    <h5>Biographical content</h5>
</aside>

<aside class="sidebar history">
    <h5>Historical content</h5>
</aside>

SCSS

/* Main nav */
nav {
    float: right;
    margin-top: 3px;
    ul {
        margin: 0;
        height: 0;
    }
    ul li {
        display: inline-block;
        margin-right: 35px;
    }
}

.sidebar {
  width: 50%;
    height: 100%;
  position: fixed;
  top: 0;
    right: 0;
    margin-right: -50%;
    background: $black;
}

.sidebar.artists.active,
.sidebar.about.active,
.sidebar.history.active {
    margin-right: 0;
}

JS

$(function() {
    $( ".artists" ).click(function() {
        $( ".sidebar.artists" ).toggleClass( "active" );
    });
});

$(function() {
    $( ".about" ).click(function() {
        $( ".sidebar.about" ).toggleClass( "active" );
    });
});

$(function() {
    $( ".history" ).click(function() {
        $( ".sidebar.history" ).toggleClass( "active" );
    });
});

JSFiddle

Answer 1

试试这个:

HTML:

<ul>
      <li class="artists"><a href="#">Artists</a></li>
      <li class="about"><a href="#">About</a></li>
      <li class="history"><a href="#">History</a></li>
</ul>
<aside class="sidebar artists">
    <li><h5>Artist Name</h5></li>
</aside>

<aside class="sidebar about">
    <h5>Biographical content</h5>
</aside>

<aside class="sidebar history">
    <h5>Historical content</h5>
</aside>

CSS:

.active{
color:red;
font-size:25px;
font-weight:bold;
}


/* Main nav */
nav {
    float: right;
    margin-top: 3px;
    ul {
        margin: 0;
        height: 0;
    }
    ul li {
        display: inline-block;
        margin-right: 35px;
    }
}

.sidebar {
  width: 50%;
    height: 100%;
  position: fixed;
  top: 0;
    right: 0;
    margin-right: -50%;
    background: $black;
}

.sidebar.artists.active,
.sidebar.about.active,
.sidebar.history.active {
    margin-right: 0;
}

JS:

 $('li').click(function() {
    var subMenu = $(this).attr('class').substring(-1,7);
    $("aside.sidebar").removeClass('active');
    if ( !$( this ).hasClass( 'active' ) ) {
            $("aside."+subMenu).addClass('active');
    }
    $(this).siblings().removeClass('active');
    $(this).toggleClass('active');
});

FIDDLE