javascript - 多个选项卡在同一页面上不起作用

标签 javascript jquery html css

我的页面上有多个标签。我在第二个选项卡上遇到了问题。在页面加载时，它显示所有选项卡内容，但在单击选项卡时它正在工作。

检查屏幕截图，在第一个选项卡部分中显示的是选中的内容，但在第二个选项卡部分中，这两个内容都在页面加载时显示。我必须在页面加载时仅显示选定的内容。

enter image description here 

$(document).ready(function() {
  //for tabs show hide
  $(".tab_click li a").on("click", function(e) {
    $(this.hash).fadeIn(400).siblings().fadeOut(400);
    e.preventDefault();
  }).first().click();

  // for active class
  $(".tab_click li").on("click", function() {
    $(".tab_click li.current").removeClass("current");
    $(this).addClass("current");
  });
});
.zero_tabs {
  text-align: center;
  padding-bottom: 60px;
}

.zero_tabs ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: inline-block;
  background: #fafafa;
  overflow: hidden;
  border: 2px solid #1883F0;
  border-radius: 50px;
}

.zero_tabs ul li {
  background: none;
  color: #222;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  line-height: normal;
  transition: .2s;
  font-size: 20px;
  min-width: 130px;
}

.zero_tabs ul li.current {
  background: #1883F0;
  color: #fff;
  border-radius: 50px;
}

.zero_tabs ul li a {
  color: #000;
  padding: 8px;
  display: block;
}

.zero_tabs ul li.current a {
  color: #fff;
  text-decoration: none;
}
<div class="zero_tabs">
  <ul class="tab_click">
    <li class="current"><a href="#products">Products</a></li>
    <li><a href="#Services">Services</a></li>
  </ul>
</div>
<div class="main_tab clearfix">
  <div class="tabs_wrap" id="products">
    <div class="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

  <div class="tabs_wrap" id="Services">
    <div class="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>




</div>


<div class="zero_tabs">
  <ul class="tab_click">
    <li class="current"><a href="#products1">Products2</a></li>
    <li><a href="#Services2">Services2</a></li>
  </ul>
</div>
<div class="main_tab clearfix">
  <div class="tabs_wrap" id="products1">
    <div class="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

  <div class="tabs_wrap" id="Services2">
    <div class="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

</div>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>

最佳答案

我可以解决这个问题请检查。 如果您对代码有任何疑问，请发表评论。

$(document).ready(function() {
  //for tabs show hide
  $("ul.tab_click li.current a").each(function() {
    navigateBoxes(this)
  });

  $("ul.tab_click li a").on("click", function(e) {
    $(this.hash).fadeIn(400).siblings().fadeOut(400);
    e.preventDefault();
  })

  function navigateBoxes(elem) {
    $(elem.hash).fadeIn(400).siblings().fadeOut(400);
  }

  // for active class
  $(".tab_click li").on("click", function() {
    $(this).parent().find("li.current").removeClass("current");
    $(this).addClass("current");
  });
});
.zero_tabs {
  text-align: center;
  padding-bottom: 60px;
}

.zero_tabs ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: inline-block;
  background: #fafafa;
  overflow: hidden;
  border: 2px solid #1883F0;
  border-radius: 50px;
}

.zero_tabs ul li {
  background: none;
  color: #222;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  line-height: normal;
  transition: .2s;
  font-size: 20px;
  min-width: 130px;
}

.zero_tabs ul li.current {
  background: #1883F0;
  color: #fff;
  border-radius: 50px;
}

.zero_tabs ul li a {
  color: #000;
  padding: 8px;
  display: block;
}

.zero_tabs ul li.current a {
  color: #fff;
  text-decoration: none;
}
<div class="zero_tabs">
  <ul class="tab_click">
    <li class="current"><a href="#products">Products</a></li>
    <li><a href="#Services">Services</a></li>
  </ul>
</div>
<div class="main_tab clearfix">
  <div class="tabs_wrap" id="products">
    <div class="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

  <div class="tabs_wrap" id="Services">
    <div class="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

<div class="zero_tabs">
  <ul class="tab_click">
    <li class="current"><a href="#products1">Products2</a></li>
    <li><a href="#Services2">Services2</a></li>
  </ul>
</div>
<div class="main_tab clearfix">
  <div class="tabs_wrap" id="products1">
    <div class="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

  <div class="tabs_wrap" id="Services2">
    <div class="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

关于javascript - 多个选项卡在同一页面上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57466561/

上一篇：html - 两个 div 在另一个 div 中的垂直对齐而不使用显示 :flex

下一篇：css - @font-face 字母间距仅在移动浏览器上看起来更宽

相关文章：

javascript - 切换 Backbone 和 Marionette 中的树列表分支

html - 平滑的按钮过渡

javascript - 渐变线性CSS问题(附上plunker

javascript - 过滤器处于事件状态时防止刷新 Kendo Grid

css - 字母间距似乎使 div 移动

javascript - 如何根据子串位置在CodeMirror中突出显示子串

javascript - 在没有第三方应用程序的情况下实现两要素身份验证

javascript - 如何在 Angular 应用程序中显示或隐藏某些页面的标题？

javascript - 如何使用 javascript 过滤列表，然后从中删除结果

javascript - 选择框高度在 chrome 中不起作用

©2024 IT工具网  联系我们