单击时将类添加到 li 标记

Add class to li tag on click

本文关键字：li 标记 添加 单击      更新时间：2023-09-26

单击类时如何向<li>元素添加类？

我有以下代码：

<ul id="moodtabs" class="side bar tabs">
    <li id="tabs1" onclick="showStuff(this)" class="mbutton">Cheerful</li>
    <li id="tabs2" onclick="showStuff(this)" class="mbutton">Romantic</li>
</ul>
<div id="tabs-1" class="tabContent" style="display: block;">
    <h4>Content 1</h4>
</div>
<div id="tabs-2" class="tabContent" style="display: block;">
    <h4>Content 2</h4>
</div>

当用户单击第一个<li>时，将显示内容 1，第二个<li>的第 2 个内容也会发生同样的情况。

这是我的JS：

function showStuff(element)  {
    var tabContents = document.getElementsByClassName('tabContent');
    for (var i = 0; i < tabContents.length; i++) { 
        tabContents[i].style.display = 'none';
    }
    var tabContentIdToShow = element.id.replace(/('d)/g, '-$1');
    document.getElementById(tabContentIdToShow).style.display = 'block';
}
$('ul#moodtabs li').click(function() {
    $('ul li.current').removeClass('current');
    $(this).closest('li').addClass('current');
});

我正在尝试将类active添加到<li>标签中，以便我可以在它们处于活动状态时设置它们的样式。

你的代码已经工作了（虽然可以写得更好）
但很可能你错误地将你的jQuery代码包装在DOM中：

jQuery(function( $ ){ // DOM ready
  $('.tabs').each(function() { 
  
    var $tab = $(this).find(".tab");
    
    $tab.on("click", function() {
    
      var tabId = this.id.replace(/'D/g,'');
      $tab.not(this).removeClass('current');
      $(this).addClass('current');
      
      $(".tabContent").removeClass("current");
      $("#tabs-"+tabId).addClass("current");
      
    });
  });
  
});
.mbutton        {background:none;}
.mbutton.current{background:red;}
.tabContent        {display:none;}
.tabContent.current{display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<ul id="moodtabs" class="side bar tabs">
  <li id="tabs1" class="tab mbutton">Cheerful</li>
  <li id="tabs2" class="tab mbutton">Romantic</li>
</ul>
<div id="tabs-1" class="tabContent">
  <h4>Content 1</h4>
</div>
<div id="tabs-2" class="tabContent">
  <h4>Content 222222</h4>
</div>

我认为最简单的绑定是

$('ul#moodtabs li').click(function() {
    $(this).addClass('current').siblings('li').removeClass('current');
});

你也可以完全删除你的javascript函数，让它成为你的完整函数

。 
$('ul#moodtabs li').click(function() {
    var myTab = $(this).index();
    $(this).addClass('current').siblings('li').removeClass('current');
    $('.tabContent').eq(myTab).css('display','block').siblings('.tabContent').css('display','none');
});
相关文章：