javascript - 在多个 div 或类似选项卡之间切换

Question

我正在开发一个自定义选项卡，该选项卡具有动画底部边框，可在

中从一个选项卡滑动到另一个选项卡

示例:http://codepen.io/anon/pen/NxNZLv

<div class="tab-nav-wrapper">
  <ul>
    <li class="one"><a href="#">ONE</a></li><!--
 --><li class="two"><a href="#">TWO</a></li><!--
 --><li class="three"><a href="#">THREE</a></li><!--
 --><li class="four"><a href="#">FOUR</a></li>
    <hr />
  </ul>
</div>
<div class="tab-content-wrapper">
  <div class="tab1-c"><p>This is ONE</p></div> 
  <div class="tab2-c"><p>This is TWO</p></div> 
  <div class="tab3-c"><p>This is THREE</p></div> 
  <div class="tab4-c"><p>This is FOUR</p></div> 

<div>

我希望根据单击的选项卡显示相关元素。我试图让它工作但出现错误。

Event 试图将其转换为 Bootstrap 选项卡，但均无效。它打破了我想要的标签动画

基于 Boostrap 的示例:http://codepen.io/anon/pen/KVzjJo

我已经更新了 fiddle 并为每个选项卡编写了脚本。而不是我想要一个脚本来管理它。

http://codepen.io/anon/pen/NxNZLv

我们可以改进它吗？

Answer 1

可以通过jquery获取被点击元素的index .index()然后使用 jquery .eq()根据点击元素的索引显示标签内容。

CodePen

注意:两个函数都是从零开始的，不需要加一。

$('.tab-nav-wrapper ul li a').click(function(){  
  $('.tab-content-wrapper > div').hide();
 $('.tab-content-wrapper > div').eq($(this).parent().index()).show();  
});