Question

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

作为奖励，我还想在相关的侧边栏中添加一个.active类到相关的菜单项。

任何帮助非常感谢！

HMTL

<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

Answer 2

使用$(this)

例如：

$(function() {
    $( ".artists" ).click(function() {
        $( ".artists" ).not($( this )).removeClass( "active" );
        $( this ).toggleClass( "active" );
    });
});

Answer 3

您可以像这样使用addClass和removeClass：

$('nav li').on('click',function(e){
      e.preventDefault();
       //first remove active class from lists and aside elements
       $('nav li, aside').removeClass('active');
       //add active class on clicked menu item
       $(this).addClass('active');
       //add active class on relevant aside element
      var itemClass = this.classList;//eg. artists active
       $('aside.'+itemClass[0]).addClass('active');//eg. add active on aside.artists
    });

.active{
  background-color: red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 4

试试这个：你可以为所有菜单lis添加公共类，让我们说menu，如下面的html所示。注册一个单击处理程序并切换侧边栏的活动类，其菜单与菜单li相同。同时删除其他边栏的活动类。

HTML：

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

jQuery：

$(function() {
    $( "li.menu" ).click(function() {
        var className = $(this).attr('class').replace(' menu','');        
        $( ".sidebar." + className ).toggleClass( "active" );
        //remove active class from all other sidebar
       $(".sidebar").not( ".sidebar." + className ).removeClass('active');

       //add active class to menu clicked
        $(this).addClass( "active" );
    });
});

<强> JFFiddle Demo

Answer 5

$('ul li').click(function(){
    $('aside').hide().filter('.'+$(this).attr('class')).show();
    $(this).addClass('active');
})

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

5 个答案: