Question

我的页面上有2组选项卡，它们共享相同的类。我需要单击功能仅适用于所单击的选项卡菜单，但同时适用于两者。我知道答案就在于使用“ this”，但我不知道如何将其插入

HTML：

<div className="tabbed-menu" id="tabs">
<ul className="tab-list">
<li data-tab-item="1" className="tab-item"><a href="javascript:void(0)">Active Section</a></li>
<li data-tab-item="2" className="tab-item"><a href="javascript:void(0)">Item Two</a></li>
<li data-tab-item="3" className="tab-item"><a href="javascript:void(0)">Item Three</a></li>
 </ul>
<div className="tab-container">
<div data-tab-item="1" id="tab1" className="tab-content"><p>Content Goes Here</p></div>
<div data-tab-item="2" id="tab2" className="tab-content"><p>Second Content Goes Here</p></div>
<div data-tab-item="3" id="tab3" className="tab-content"><p>Third Content Goes Here</p></div>
</div>
</div>

<div className="tabbed-menu" id="tabs2">
<ul className="tab-list">
<li data-tab-item="1" className="tab-item"><a href="javascript:void(0)">Active Section</a></li>
<li data-tab-item="2" className="tab-item"><a href="javascript:void(0)">Item Two</a></li>
<li data-tab-item="3" className="tab-item"><a href="javascript:void(0)">Item Three</a></li>
 </ul>
<div className="tab-container">
<div data-tab-item="1" id="tab1" className="tab-content"><p>Content Goes Here</p></div>
<div data-tab-item="2" id="tab2" className="tab-content"><p>Second Content Goes Here</p></div>
<div data-tab-item="3" id="tab3" className="tab-content"><p>Third Content Goes Here</p></div>
</div>
</div>

JS：

 $(document).ready(function() {
    if (!$('[data-tab-item]').hasClass('active').length){
        $('li[data-tab-item]').first().addClass('active');
        $('div[data-tab-item]').first().addClass('active');
    }   
    $(".tab-item").click(function(){
        var tabNumber = $(this).attr('data-tab-item');
        $('[data-tab-item]').removeClass('active');
        $('[data-tab-item='+ tabNumber +']').addClass('active');
    });
});

Answer 1

传递给click方法的回调函数也可以在传递事件数据的情况下接收参数。事件数据具有称为目标的属性。女巫是事件已发出的女巫上的节点。对于您的情况，您不应这样做： $（这个）但是类似：

$(".tab-item").click(function(event){
  var tabNumber = $(event.target).attr('data-tab-item');
  $('[data-tab-item]').removeClass('active');
  $('[data-tab-item='+ tabNumber +']').addClass('active');
});

Answer 2

closest()将搜索最接近的父级。从那里可以找到该元素中的任何元素。

$(document).ready(function() {
  if (!$('[data-tab-item]').hasClass('active').length) {
    $('li[data-tab-item]').first().addClass('active');
    $('div[data-tab-item]').first().addClass('active');
  }
  $(".tab-item").click(function() {
    $this = $(this);
    $menu = $this.closest('.tabbed-menu');
    $menu.find('[data-tab-item]').removeClass('active');
    var tabNumber = $this.attr('data-tab-item');
    $menu.find('[data-tab-item=' + tabNumber + ']').addClass('active');
  });
});

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have 2 sets of tabs on my page that share the same classes. I need my click function to only apply to the tab-menu thats clicked, but instead it applies to both. I know the answer lies in using "this" but I can't figure out how to plug it in HTML:

<div class="tabbed-menu" id="tabs">
  <ul class="tab-list">
    <li data-tab-item="1" class="tab-item"><a href="javascript:void(0)">Active Section</a></li>
    <li data-tab-item="2" class="tab-item"><a href="javascript:void(0)">Item Two</a></li>
    <li data-tab-item="3" class="tab-item"><a href="javascript:void(0)">Item Three</a></li>
  </ul>
  <div class="tab-container">
    <div data-tab-item="1" id="tab1" class="tab-content">
      <p>Content Goes Here</p>
    </div>
    <div data-tab-item="2" id="tab2" class="tab-content">
      <p>Second Content Goes Here</p>
    </div>
    <div data-tab-item="3" id="tab3" class="tab-content">
      <p>Third Content Goes Here</p>
    </div>
  </div>
</div>

<div class="tabbed-menu" id="tabs2">
  <ul class="tab-list">
    <li data-tab-item="1" class="tab-item"><a href="javascript:void(0)">Active Section</a></li>
    <li data-tab-item="2" class="tab-item"><a href="javascript:void(0)">Item Two</a></li>
    <li data-tab-item="3" class="tab-item"><a href="javascript:void(0)">Item Three</a></li>
  </ul>
  <div class="tab-container">
    <div data-tab-item="1" id="tab1" class="tab-content">
      <p>Content Goes Here</p>
    </div>
    <div data-tab-item="2" id="tab2" class="tab-content">
      <p>Second Content Goes Here</p>
    </div>
    <div data-tab-item="3" id="tab3" class="tab-content">
      <p>Third Content Goes Here</p>
    </div>
  </div>
</div>

Answer 3

使用>选择器选择所选元素的子元素。 parent>child

$(document).ready(function() {
    if (!$('#tabs>.tabb1>[data-tab-item]').hasClass('active').length){
    alert("s");
        $('#tabs>.tabb1>li[data-tab-item]').first().addClass('active');
        $('#tabs>.tabb1>div[data-tab-item]').first().addClass('active');
    }   
    $("#tabs2>.tabb2>.tab-item").click(function(){
        var tabNumber = $(this).attr('data-tab-item');
        $('#tabs2>.tabb2>[data-tab-item]').removeClass('active');
        $('#tabs2>.tabb2>[data-tab-item='+ tabNumber +']').addClass('active');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div className="tabbed-menu" id="tabs">
<ul className="tab-list">
<li data-tab-item="1" className="tab-item"><a href="javascript:void(0)">Active Section</a></li>
<li data-tab-item="2" className="tab-item"><a href="javascript:void(0)">Item Two</a></li>
<li data-tab-item="3" className="tab-item"><a href="javascript:void(0)">Item Three</a></li>
 </ul>
<div className="tab-container">
<div data-tab-item="1" id="tab1" className="tab-content"><p>Content Goes Here</p></div>
<div data-tab-item="2" id="tab2" className="tab-content"><p>Second Content Goes Here</p></div>
<div data-tab-item="3" id="tab3" className="tab-content"><p>Third Content Goes Here</p></div>
</div>
</div>

<div className="tabbed-menu" id="tabs2">
<ul className="tab-list">
<li data-tab-item="1" className="tab-item"><a href="javascript:void(0)">Active Section</a></li>
<li data-tab-item="2" className="tab-item"><a href="javascript:void(0)">Item Two</a></li>
<li data-tab-item="3" className="tab-item"><a href="javascript:void(0)">Item Three</a></li>
 </ul>
<div className="tab-container">
<div data-tab-item="1" id="tab1" className="tab-content"><p>Content Goes Here</p></div>
<div data-tab-item="2" id="tab2" className="tab-content"><p>Second Content Goes Here</p></div>
<div data-tab-item="3" id="tab3" className="tab-content"><p>Third Content Goes Here</p></div>
</div>
</div>

单击函数应用于相同类的所有元素

3 个答案: