javascript - 单击时将类添加到 li 标签

Question

如何将类添加到 <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>与第二个内容。

这是我的 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>标签，以便我可以在它们处于事件状态时设置它们的样式。

Answer 1

你的代码已经可以工作了(虽然可以写得更好)
但很可能您没有将 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>