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

JQuery add/remove class based on menu item clicked

本文关键字：添加 删除 菜单项 单击 JQuery      更新时间：2023-09-26

我正在使用下面的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>

南海

/* 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

试试这个：

.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');
});

小提琴

使用 $(this)

例如：

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

试试这个： 您可以为所有菜单 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>

j查询 ：

$(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 演示

你可以像这样使用 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>

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