在多个 div 或类似选项卡之间切换答案

【问题标题】：Toggle between multiple div's or similar to tabs在多个 div 或类似选项卡之间切换
【发布时间】：2017-05-17 21:45:41
【问题描述】：

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

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

例如：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

我们可以改进它吗？

【问题讨论】：

你想要this这样的东西吗？
@alirezasafian，谢谢这是我想要做的。您将其作为答案，以便我可以将其标记为正确答案
我会的，但我没有让你投反对票。我会放弃投票来理解我。
@alirezasafian，没关系。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

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

CodePen

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

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

【讨论】：

【解决方案2】：

试试这个，我根据你的例子做了一个分支：

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

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

【讨论】：

我也让它与单个脚本一起工作。您的脚本使场景。 codepen.io/anon/pen/NxNZLv

【解决方案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()
});

我将您的选项卡的类更改为更实用和可读的名称。

【讨论】：

【解决方案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');
});
});

【讨论】：