Question

我已经构建了一个小标签导航，我想在每次悬停标签时打开多个元素。

现在我将data-tab="tab1"与id="tab1"连接起来。

由于我想打开多个tab-content，我认为我不再使用ID了。

我需要添加哪些内容才能将课程active并排添加到多个tab-content？

请查看下面的脚本。

$(document).ready(function() {

  $('.product-spec').each(function() {
    var self = $(this); 
    self.find('.material--switch li').hover(function() {
      var tab_id = $(this).attr('data-tab');
      self.find('.active').removeClass('active');
      $(this).addClass('active');
      $('#' + tab_id).addClass('active');
    });
  });

});

.material--switch{
  list-style: none;
  display: inline-block;
  margin-bottom: 20px;
}

.material--switch li{
  border-right: 1px solid #f0f0f0;
  line-height: 45px;
  text-align: center;
  border-right: 0;
  color: #6f1132;
  display: inline-block;
  margin-right: -4px;
  background: #f2f4f6;
  box-shadow: #ced2db 0 1px 2px 0;
  cursor: pointer;
}
  
.material--switch li a {
  font-weight: 500;
  padding: 0 25px;
  display: block;
  color: #666;
  text-decoration: none;
}

.material--switch li.active{
  border-color: #039BE5 !important;
  background: #039BE5;
}


.material--switch li:first-child {
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 3px;
}

.material--switch li:last-child {
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 0;
}

.tab-content{
  display: none;
}

.tab-content.active{
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="product-spec">

<ul class="material--switch">
<li data-tab="tab1" class="active">TAB 1</li>
<li data-tab="tab2">TAB 2</li>
<li data-tab="tab3">TAB 3</li>
</ul>

  
  
<div id="tab1" class="tab-content active">
Tab 1 active
</div>

<div id="tab2" class="tab-content">
Tab 2 active  
</div>

<div id="tab3" class="tab-content">
Tab 3 active
</div>
  

  
<div id="tab1" class="tab-content active">
Tab 1 active
</div>

<div id="tab2" class="tab-content">
Tab 2 active  
</div>

<div id="tab3" class="tab-content">
Tab 3 active
</div> 
  
</div>

Answer 1

我建议使用类而不是ID，并添加data-triggers-contents=".tab1, .tab2, .tab3"

请确保您的data-triggers-contents包含有效的jQuery selector。

这样你可以使用

var tab_classes = $(this).attr('data-triggers-content');

// ...

$(tab_classes).addClass('active');

标签HTML看起来像<div class="tab1 tab-content">Tab 1 active</div>

jQuery：如何将类添加到具有相同名称的多个元素？

1 个答案: