Question

我需要添加哪些内容才能并排运行多个标签导航？

我已经构建了一个小标签导航并遇到问题，任何想法如何解决这个问题？

请查看下面的脚本。

＆＃13;

$(document).ready(function() {

  $('ul.material--switch li').click(function() {
    var tab_id = $(this).attr('data-tab');

    $('ul.material--switch li').removeClass('active');
    $('.tab-content').removeClass('active');

    $(this).addClass('active');
    $("#" + tab_id).addClass('active');
  })

})

＆＃13;

.material--switch {
  list-style: none;
  display: inline-block;
  margin-bottom: 20px;
}
.material--switch li {
  border: 1px solid #f0f0f0;
  line-height: 36px;
  text-align: center;
  border-right: 0;
  color: #6f1132;
  display: inline-block;
  margin-right: -4px;
}
.material--switch li.active {
  border-color: #039BE5 !important;
  background: #039BE5;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="material--switch">
  <li class="active" data-tab="option1">option1</li>
  <li data-tab="option2">option2</li>
</ul>

<div id="option1" class="tab-content active">
  show option1
</div>

<div id="option2" class="tab-content">
  show option2
</div>


<ul class="material--switch">
  <li data-tab="option3">option3</li>
  <li class="active" data-tab="option4">option4</li>
</ul>

<div id="option3" class="tab-content">
  show option3
</div>

<div id="option4" class="tab-content active">
  show option4
</div>

＆＃13;

Answer 1

现在你的代码作为一个集合作用于所有ul.material--switch li个元素;您的代码没有任何迹象表明您希望对其执行单独的选项卡集。在这里，我在每个组周围添加了一个.container div，以包含tabset及其可用选项;您的函数是针对每个.container单独运行的，并且仅对其内容起作用。

$(document).ready(function() {

  $('.container').each(function() {
    var self = $(this); // in the next line `this` will get taken over by the `li`:
    self.find('.material--switch li').click(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: 1px solid #f0f0f0;
  line-height: 36px;
  text-align: center;
  border-right: 0;
  color: #6f1132;
  display: inline-block;
  margin-right: -4px;
}
.material--switch li.active {
  border-color: #039BE5 !important;
  background: #039BE5;
}
.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="container">
  <ul class="material--switch">
    <li class="active" data-tab="option1">option1</li>
    <li data-tab="option2">option2</li>
  </ul>

  <div id="option1" class="tab-content active">option1</div>
  <div id="option2" class="tab-content">option2</div>
</div>

<div class="container">
  <ul class="material--switch">
    <li class="active" data-tab="option3">option3</li>
    <li data-tab="option4">option4</li>
  </ul>

  <div id="option3" class="tab-content active">option3</div>
  <div id="option4" class="tab-content">option4</div>
</div>

Answer 2

将每个集合包含在一个包含div中，然后只需将jQuery更改为仅定位要单击的元素的父元素中的元素：

＆＃13;

$(document).ready(function() {

  $('ul.material--switch li').click(function() {
    var tab_id = $(this).attr('data-tab');
    var parent = $(this).parent().parent();
    parent.find('ul.material--switch li').removeClass('active');
    parent.find('.tab-content').removeClass('active');

    $(this).addClass('active');
    parent.find("#" + tab_id).addClass('active');
  })

})

＆＃13;

.material--switch {
  list-style: none;
  display: inline-block;
  margin-bottom: 20px;
}
.material--switch li {
  border: 1px solid #f0f0f0;
  line-height: 36px;
  text-align: center;
  border-right: 0;
  color: #6f1132;
  display: inline-block;
  margin-right: -4px;
}
.material--switch li.active {
  border-color: #039BE5 !important;
  background: #039BE5;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
	<ul class="material--switch">
	  <li class="active" data-tab="option1">option1</li>
	  <li data-tab="option2">option2</li>
	</ul>

	<div id="option1" class="tab-content active">
	  show option1
	</div>

	<div id="option2" class="tab-content">
	  show option2
	</div>
</div>

<div class="container">
	<ul class="material--switch">
	  <li data-tab="option3">option3</li>
	  <li class="active" data-tab="option4">option4</li>
	</ul>

	<div id="option3" class="tab-content">
	  show option3
	</div>

	<div id="option4" class="tab-content active">
	  show option4
	</div>
</div>

＆＃13;

分别为每个元素运行jQuery函数

2 个答案: