Tab Content Script Help

**ddusr** · 03-19-2007, 05:21 AM

1) Script Title: Tab Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tabcontent.htm

3) Describe problem: I am fiddling with this script for quite some time now but unable to make it work. Please help me.
I am attaching the sample page I used to test. I havent changed anything in th CSS or Javascript. When the page loads for the first time content of first tab appears. When I click on any other tabs nothing appears; also i f I click back on first one no content appears!
Hope you wizards can tell me my mistake. Thanks a lot in advance.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testt</title>
<link href="tabcontent.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="tabcontent.js">
/***********************************************
* Tab Content script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
<body>
<div>
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">Over</a></li>
<li><a href="#" rel="tcontent2">Specs</a></li>
<li><a href=""#" rel="tcontent3">Loca</a></li>
</ul>
</div>
<div class="tabcontentstyle">
<div id="tcontent1" class="tabcontent">
 History reveal that civilizations have planted their root beside rivers. 
</div>
<div id="tcontent2" class="tabcontent">
<ul>
 <li>One</li>
 <li>Two</li>
 <li>Three Four Five</li>
</ul>
</div>
<div id="tcontent3" class="tabcontent">
 <img src="test.gif">
</div>
</div>
<p>Paragraph One.</p>

<script type="text/javascript">
<!--
initializetabcontent("maintab")
-->
</script>

</body>
</html>

**tech_support** · 03-19-2007, 05:51 AM

Try this:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testt</title>
<link href="tabcontent.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="tabcontent.js">
/***********************************************
* Tab Content script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
<body>
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">Tab 1</a></li>
<li><a href="#" rel="tcontent2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

<div class="tabcontentstyle">

<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
<p><b><a href="javascript: expandtab('maintab', 3)">Click here to select 4th tab</a></b></p>
</div>

<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>
</body>
</html>

Direct from the Demo Page.

**codeexploiter** · 03-19-2007, 05:55 AM

I've tested your code in my PC and in both browsers (IE 7 & Firefox) it works as it supposed. In other words whenever I click the tabs it shows the content of the corresponding tab except the "loca" tab which has a reference to an image test3.gif which I don't have in my PC.

If you have a link to your page plz provide that.

**ddusr** · 03-19-2007, 11:35 AM

Thanks a million Codeexploiter.
It worked.
But it beats me what the difference was between my bit of code and the new one you provided. My env is Win2k pc with Firefox 1.7, Opera 7.54..This is not hosted ..i am testing on my (local) pc..sorry, I cannot provide the url.
Anyway thanks a lot for your quick help.

Thread: Tab Content Script Help

Thread Tools

Search Thread

Tab Content Script Help

Bookmarks

Bookmarks

Posting Permissions