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>

当用户点击第一个<li>时，会显示内容1，第二个内容的第二个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'); });也会发生同样的情况。

这是我的JS：

active

我尝试将<li>类添加到{{1}}代码中，这样我就可以在它们处于活动状态时对其进行设置。

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>

Answer 2

我认为最简单的绑定是

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

单击时将类添加到li标签

2 个答案: