主页 / 问题 / 694807
Accepted
Fresko Gonsaless
Asked:2020-07-21 03:28:46 +0800 CST2020-07-21 03:28:46 +0800 CST

该脚本无法正常工作。选项卡

  • 772

标签有一些js代码：

$(".tab_item").not(":first").hide();
$(".wrapper .tab").click(function() {
  $(".wrapper .tab").removeClass("active").eq($(this).index()).addClass("active");
  $(".tab_item").hide().eq($(this).index()).fadeIn()
}).eq(0).addClass("active");
.wrapper {
  width: 80%;
  border: 3px solid #ececec;
  border-radius: 3px;
  margin:20px;
}

.active {
  text-align: center;
  display: table-cell;
  width: 1%;
  color: #9097a1;
  padding: 15px 0;
  background: #fff;
  font-size: 18px;
}

.tab:not(.active) {
  text-align: center;
  display: table-cell;
  width: 1%;
  color: #abb1ba;
  padding: 15px 0;
  background: #ececec;
  font-size: 18px;
}

.tab_content {
  padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="tabs">
    <span class="tab">Вкладка 1</span>
    <span class="tab">Вкладка 2</span>
    <span class="tab">Вкладка 3</span>
  </div>
  <div class="tab_content">
    <div class="tab_item">Содержимое 1</div>
    <div class="tab_item">Содержимое 2</div>
    <div class="tab_item">Содержимое 3</div>
  </div>
</div>

<div class="wrapper">
  <div class="tabs">
    <span class="tab">Вкладка 4</span>
    <span class="tab">Вкладка 5</span>
    <span class="tab">Вкладка 6</span>
  </div>
  <div class="tab_content">
    <div class="tab_item">Содержимое 4</div>
    <div class="tab_item">Содержимое 5</div>
    <div class="tab_item">Содержимое 6</div>
  </div>
</div>

效果很好，但是当站点需要 2 个时。选项卡，脚本无法正常工作。

有可能解决这个问题吗？

javascript

1 个回答

  1. Best Answer

    $('.tab_content').each(function() {
  $(this).find(".tab_item").not(":first").hide();
});
$('.tabs').each(function() {
  $(this).find(".tab").first().addClass('active');
});
$(".wrapper .tab").click(function() {
  $(this).closest('.wrapper').find(".tab").removeClass("active").eq($(this).index()).addClass("active");
  $(this).closest('.wrapper').find(".tab_item").hide().eq($(this).index()).fadeIn()
});
    .wrapper {
  width: 80%;
  border: 3px solid #ececec;
  border-radius: 3px;
  margin: 20px;
}

.active {
  text-align: center;
  display: table-cell;
  width: 1%;
  color: #9097a1;
  padding: 15px 0;
  background: #fff;
  font-size: 18px;
}

.tab:not(.active) {
  text-align: center;
  display: table-cell;
  width: 1%;
  color: #abb1ba;
  padding: 15px 0;
  background: #ececec;
  font-size: 18px;
}

.tab_content {
  padding: 20px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="tabs">
    <span class="tab">Вкладка 1</span>
    <span class="tab">Вкладка 2</span>
    <span class="tab">Вкладка 3</span>
  </div>
  <div class="tab_content">
    <div class="tab_item">Содержимое 1</div>
    <div class="tab_item">Содержимое 2</div>
    <div class="tab_item">Содержимое 3</div>
  </div>
</div>

<div class="wrapper">
  <div class="tabs">
    <span class="tab">Вкладка 4</span>
    <span class="tab">Вкладка 5</span>
    <span class="tab">Вкладка 6</span>
  </div>
  <div class="tab_content">
    <div class="tab_item">Содержимое 4</div>
    <div class="tab_item">Содержимое 5</div>
    <div class="tab_item">Содержимое 6</div>
  </div>
</div>

<div class="wrapper">
  <div class="tabs">
    <span class="tab">Вкладка 7</span>
    <span class="tab">Вкладка 8</span>
    <span class="tab">Вкладка 9</span>
  </div>
  <div class="tab_content">
    <div class="tab_item">Содержимое 7</div>
    <div class="tab_item">Содержимое 8</div>
    <div class="tab_item">Содержимое 9</div>
  </div>
</div>

    • 1

相关问题