tabInfo

by bhupendra negi

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<ul class="nav-tabs1">
  <li class="one active"><a href="#tab1">Show Tab 1</a></li>
  <li class="two"><a href="#tab2">Show Tab 2</a></li>
  <li class="three"><a href="#tab3">Show Tab 3</a></li>
  <hr>
</ul>
</div>

<section id="tab1" class="tab-content active">
  <div>
    Content in tab 1
  </div>
</section>
<section id="tab2" class="tab-content hide">
  <div>
    Content in tab 2
  </div>
</section>
<section id="tab3" class="tab-content hide">
  <div>
    Content in tab 3
  </div>
</section>

CSS

.container {
		  width: 100%;
		  margin: 0 auto;
		}
		
		ul li {
		  display: inline;
		  text-align: center;
		}
		
		a {
		  display: inline-block;
		  width: 25%;
		  padding: .75rem 0;
		  margin: 0;
		  text-decoration: none;
		  color: #333;
		}
    
    li.active a {
       color:#0087A3;
       text-decoration: none;
       text-shadow: 2px 2px 0px #eee
    }
		
	 .nav-tabs1	a:hover {
		  text-decoration: none;
		}
		
		hr {
		  height: .25rem;
		  width: 25%;
		  margin: 0;
		  background: #003c5a;
		  border: none;
		  transition: .3s ease-in-out;
		}
		
		.tab-content.active {
		  display: block;
		}
		
		.tab-content.hide {
		  display: none;
		}

JavaScript

$('.nav-tabs1 > li > a').click(function(event) {
		  event.preventDefault(); //stop browser to take action for clicked anchor

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

		  //find actived navigation and remove 'active' css
		  var actived_nav = $('.nav-tabs1 > 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');
		  console.log(target_tab_selector);
		  $(target_tab_selector).removeClass('hide');
		  $(target_tab_selector).addClass('active');

		  // adjust margin for hr
		  var per = Number(target_tab_selector.split("tab")[1]);
		  switch (per) {
		    case 1:
		      $(".nav-tabs1 hr").css("margin-left", "0%");
		      break;
		    case 2:
		      $(".nav-tabs1 hr").css("margin-left", "25%");
		      break;
		    case 3:
		      $(".nav-tabs1 hr").css("margin-left", "50%");
		      console.log("3clickwed");
		      break;
		  }
		  
		});