Javascript 在多个div'之间切换；s或类似于选项卡

我正在处理一个自定义选项卡，该选项卡具有动画底部边框，可在中从一个选项卡滑动到另一个选项卡

例如：

这是一个

这是两个

这是三个

这是四个

我希望相关的项目显示的基础上，以往的标签是点击。我试着让它工作，但出现了错误

事件试图将其转换为无法工作的引导选项卡。它会打断我想要在选项卡上显示的动画

基于Boostrap的示例：

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

---

我们可以改进它吗？

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

---

它指定一个数据属性，您可以使用jQuery轻松读取该属性，该属性确定应该打开哪个

div

，并隐藏所有其余的属性。

您可以通过jQuery获得单击元素的

索引，然后使用jQuery根据单击元素的索引显示选项卡内容


注意：两个函数都是基于零的，不需要加一。

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

试试这个：

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()
});

我将选项卡的类更改为更具操作性和可读性的名称。
使用类似的选项卡在多个div之间切换

此代码中不包含引导


杰斯宾

你想要类似的东西吗？@alirezasafian，谢谢这正是我想要做的。你可以把它作为答案，这样我就可以把它标记为正确答案。我会的，我不会让你投反对票。我会放弃投票来理解我。@alirezasafian，这很好。我也会让它与个人脚本一起工作。你的剧本很有意思。
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()
});

$(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');
});
});