This is the second example to creating the tabs in the html by using Div tag and the javascript.
The example will explain of how to create the tabs using div tag
<html>
<head>
<link rel="stylesheet" type="text/css" href="tabcontent.css" />
<script type="text/javascript" src="tabcontent.js">
</script>
</head>
<body>
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>
<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>
</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
<p><b><a href="javascript:countries.expandit(3)">Click here to select last tab</a></b></p>
</body>
</html>
To download the js and the css please click on the below link
Click here
No comments:
Post a Comment