Source Code

Create Dynamic Tabs using jQuery & Bootstrap

jquery tabs dynamic load content | Dynamic Tabs with jQuery Example

Create Dynamic Tabs using jQuery : Click on the Tabs to show the active tab and previous tab.without refreshing page

pakainfo

pakainfo is travel portal for online Flight, Hotels and restaurant Booking system To develop this we have used .NET MVC Framework Technology, Latest Bootstrap version used in Design.

Box Ng

Online Selling All Autoparts wholesale, Multiple Language Support and enhanced Design, News Notification. This Box Ng24.com is develop in PHP with MVC framework, Latest Design Bootstrap, CSS 3.0 used.

Tutorials

BNP is informatic business profile listing website. This website is developed in .Net with MVC framework technology.

Mobicubes-website

Job posting, Resume find, Job notification, Job finding based on Location, Support, etc... this website is developed in .Net with MVC framework technology. Latest Design Bootstrap, CSS 3.0 used.

CricMaster

Online store where user can purchase everything related to pulses and home needed things. this website is developed in .Net with MVC framework technology. Latest Design Bootstrap, CSS 3.0 used.

Time Management

Set time schedual for Employee, Managers and Other guest visiters, where all the time you can predefine in the software and then math it with Biometric Device. All the functionality is more then one time attandance software. Latest Design, this website is developed in .Net with MVC framework technology.

Free Live

Free Live is online store for man and women accessories, Clothings and much more. this website is developed in PHP with Magento framework technology. Latest Design Bootstrap, CSS used.

Salon Steps

Salon Steps is ecommerce online Hair selling Expert website, where users can buy Hairs and Skin care items. Salon Steps is developed in PHP with Bigcommerce technology.

Tab on Active Tab:

Tab on Previous Tab:

Example : index.html


<!DOCTYPE html>
<html lang="en">
<head>
 <meta name="google-site-verification" content="J-19yB1D-nHyR7NyTNa1ykxieqKzF3AEZa6Fb1LtTaI" />
<meta charset="UTF-8" />

<title>Dynamic Tabs with jQuery Example - Happy 2 Help You</title>

<link rel="canonical" href="http://ng4free.com/dynamic-tabs-jquery-example/" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dynamic Tabs with jQuery Example</h2>
  <p>Create Dynamic Tabs using jQuery : Click on the Tabs to show the active tab and previous tab.without refreshing page</p>
		  <ul class="nav nav-tabs">
    <li class="active"><a href="#asfar" onclick="return false;">pakainfo</a></li>
    <li><a href="#auto" onclick="return false;">Box Ng</a></li>
    <li><a href="#net" onclick="return false;">Tutorials</a></li>
    <li><a href="#job" onclick="return false;">Mobicubes</a></li>
	<li><a href="#super" onclick="return false;">CricMaster</a></li>
	<li><a href="#time" onclick="return false;">Time Management</a></li>
	<li><a href="#vip" onclick="return false;">Free Live</a></li>
	<li><a href="#hair" onclick="return false;">Salon Steps</a></li>
  </ul>

  <div class="tab-content">
    <div id="asfar" class="tab-pane fade in active">
      <h3>pakainfo</h3>
      <p>pakainfo is travel portal for online Flight, Hotels and restaurant Booking system
To develop this we have used .NET MVC Framework Technology,
Latest Bootstrap version used in Design.</p>
    </div>
    <div id="auto" class="tab-pane fade">
      <h3>Box Ng</h3>
      <p>Online Selling All Autoparts wholesale, Multiple Language Support and enhanced Design, News Notification.
This Box Ng24.com is develop in PHP with MVC framework, Latest Design Bootstrap, CSS 3.0 used.</p>
    </div>
    <div id="net" class="tab-pane fade">
      <h3>Tutorials</h3>
      <p>BNP is informatic business profile listing website.
This website is developed in .Net with MVC framework technology.</p>
    </div>
    <div id="job" class="tab-pane fade">
      <h3>Mobicubes-website</h3>
      <p>Job posting, Resume find, Job notification, Job finding based on Location, Support, etc...
this website is developed in .Net with MVC framework technology. Latest Design Bootstrap, CSS 3.0 used.</p>
    </div>
	 <div id="super" class="tab-pane fade">
      <h3>CricMaster</h3>
      <p>Online store where user can purchase everything related to pulses and home needed things.
this website is developed in .Net with MVC framework technology. Latest Design Bootstrap, CSS 3.0 used.</p>
    </div>
	 <div id="time" class="tab-pane fade">
      <h3>Time Management</h3>
      <p>Set time schedual for Employee, Managers and Other guest visiters, where all the time you can predefine in the software and then math it with Biometric Device.
All the functionality is more then one time attandance software.
Latest Design, this website is developed in .Net with MVC framework technology.</p>
    </div>
	 <div id="vip" class="tab-pane fade">
      <h3>Free Live</h3>
      <p>Free Live is online store for man and women accessories, Clothings and much more.
this website is developed in PHP with Magento framework technology. Latest Design Bootstrap, CSS used.</p>
    </div>
	 <div id="hair" class="tab-pane fade">
      <h3>Salon Steps</h3>
      <p>Salon Steps is ecommerce online Hair selling Expert website, where users can buy Hairs and Skin care items.
Salon Steps is developed in PHP with Bigcommerce technology.
</p>
    </div>
  </div>
    <hr>
    <p class="act"><b>Tab on Active Tab</b>: <span></span></p>
    <p class="prev"><b>Tab on Previous Tab</b>: <span></span></p>
	<hr/>
	<hr/>
</div>
</body>
</html>

Example : script.js


$(document).ready(function(){
	//click to tab nav
    $(".nav-tabs a").click(function(){
		//display click this tab data
        $(this).tab('show');
    });
	//logic of active and prev tab
    $('.nav-tabs a').on('shown.bs.tab', function(event){
		// display xdata= active tab data
        var xdata = $(event.target).text();         // active tab = xdata
		// display ydata= active tab data
        var ydata = $(event.relatedTarget).text();  // previous tab = ydata
        $(".act span").text(xdata); // sapn push xdata data
        $(".prev span").text(ydata);  // sapn push ydata data
    });
});

Example : Style.css


.act{color:green;}
.prev{color:blue;}