Question

我正在开发一个自定义标签，该标签有一个动画底边框，可以从一个标签滑动到另一个标签

<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

您可以通过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();  
});

Answer 2

试试这个，我做了一个你的例子的分叉：

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

它分配了一个数据属性，您可以使用jQuery轻松读取该属性，该属性确定应该打开哪个div，并隐藏所有其余属性。

Answer 3

试试这个：http://codepen.io/anon/pen/yeOmLR

<强> JavaScript的：

var cn = function(self) {
    return (self).className.substr(4);
  },
  tcw = $('.tab-content-wrapper');

$('.tab-nav-wrapper ul li').click(function() {
  tcw.children().hide();
  tcw.children('.tab' + cn(this) + '-c').show()
});

我将标签的类更改为更易于理解和可读的名称。

Answer 4

在具有相似标签的多个div之间切换

此代码中未包含引导程序

DEMO JSBIN

$(document).ready(function() {
$('.nav-tabs > li > a').click(function(event){
event.preventDefault();

//get displaying tab content jQuery selector
var active_tab_selector = $('.nav-tabs > li.active > a').attr('href');

//find actived navigation and remove 'active' css
var actived_nav = $('.nav-tabs > li.active');
actived_nav.removeClass('active');

//add 'active' css into clicked navigation
$(this).parents('li').addClass('active');

//hide displaying tab content
$(active_tab_selector).removeClass('active');
$(active_tab_selector).addClass('hide');

//show target tab content
var target_tab_selector = $(this).attr('href');
$(target_tab_selector).removeClass('hide');
$(target_tab_selector).addClass('active');
});
});

在多个div或类似标签之间切换

4 个答案: