Switch between multiple divs or similar tabs

Question

I am working on a custom tab that has an animated bottom border that moves from one tab to another in

Example: 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>

I want related items to be displayed depending on what clicking on each tab. I tried to make it work, but got errors.

The event attempted to convert this to boot tabs that did not work. It breaks the animation I want on tabs

Boostrap based example: http://codepen.io/anon/pen/KVzjJo

I updated the fiddle and wrote a script for each tab. instead, I wanted one script to control it.

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

Can we improve it?

Answer 1

index jquery .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

Switch between multiple divs with a similar tab

This code does not include bootstrap

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