在多个 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>

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

事件试图将其转换为无法正常工作的引导程序选项卡。它打破了我在标签上想要的动画

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

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

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

我们可以改进吗？

Answer 1

您可以index通过jquery获取单击的元素.index()，然后使用jquery.eq()根据单击的元素的索引显示选项卡内容。

代码笔

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

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