Wednesday, November 13, 2013
Easy jQuery Tabbing with attractive CSS
Hiiiii, being a developer many times it happens that we want to implement a tabbing system and want to display data in that tabs without page refresh. Some find it difficult to implement but here I am teaching you to implement it in a very easier view. Tabs gives a very beautiful looks to your site and also organize the data viewed on your site in a very organised manner. As jQuery is used then it is very fast and efficient without any refreshing of page. The tabbing I'll be teaching here will have good CSS and nice looks.
CODE BEGINS :
<html>
<head>
<title>Modal</title>
<script src="http://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div style="width:50%; height:30%; border:2px solid #DDDDDD; margin-left:20px; margin-top:20px;">
<h1> Welcome to Tabbing Tutorial</h1>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">
This is Home</br>
This is Home</br>
This is Home</br>
</div>
<div class="tab-pane" id="profile">
This is profile</br>
This is profile</br>
This is profile</br>
</div>
<div class="tab-pane" id="messages">
This is message</br>
This is message</br>
This is message</br>
</div>
<div class="tab-pane" id="settings">
This is settings</br>
This is settings</br>
This is settings</br>
</div>
</div>
</div>
</body>
</html>
Hope you like this post……..Please Comment…………!!!!!!!!!
Tags: HTML , Javascript/Jquery
Subscribe to:
Post Comments (Atom)
0 Responses to “Easy jQuery Tabbing with attractive CSS”
Post a Comment