PDA

View Full Version : Can I change the TAB background color to selected without clicking the TAB?



owlee
05-02-2009, 12:41 AM
1) Script Title: tabbed document viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex3/tabdocviewer.htm

3) Describe problem:
I set up 5 tabs for my own 5 website pages. I want to show the viewer the first page and at the page bottom, prompt the viewer to continue to the 2nd page when he click my NEXT arrow and so on to the 5th page. This works according to my plan but the TAB background color does not change to indicate which current TAB page he is on because the viewer did not click on the TAB.

Can I set the current TAB to yellow to match the correct page I am displaying?
(I use Dreamweaver in design mode and am not good in code mode)

ddadmin
05-02-2009, 07:18 AM
Sure. The key is just to call the function handlelink() inside your arbitrary link (ie: "Next link"), and pass a reference to the tab you want o be selected into this function. For example, consider the below:


<ul id="tablist">
<li><a class="current" href="http://www.google.com" onClick="return handlelink(this)">Google</a></li>
<li><a href="http://www.yahoo.com" onClick="return handlelink(this)" id="y">Yahoo</a></li>
<li><a href="http://www.msn.com" onClick="return handlelink(this)">MSN</a></li>
<li><a href="http://www.news.com" onClick="return handlelink(this)">News.com</a></li>
<li><a href="http://www.dynamicdrive.com" onClick="return handlelink(this)">Dynamic Drive</a></li>
</ul>
<iframe id="tabiframe" src="http://www.google.com" width="98%" height="350px"></iframe>

<form name="tabcontrol" style="margin-top:0">
<input name="tabcheck" type="checkbox" onClick="handleview()"> Open tab links in browser window instead.
</form>

<a href="http://www.yahoo.com" onClick="return handlelink(document.getElementById('y'))">Arbritary link</a>

In this case the arbitrary link when clicked on selects the Yahoo tab (plus loads yahoo.com). Be sure to give the tab in question an unique ID, so it can be referenced.

owlee
05-05-2009, 09:16 PM
Your solution does work.
Sorry I wasn't clear in describing my problem.
The tabbed document viewer is INDEX.HTML and the tabbed pages are TAB1.HTML, TAB2.HTML, TAB3.HTML, TAB4.HTML, TAB5.HTML. I wish to have the user view the TAB pages in ascending order.

The code does work if it is in INDEX.HTML but it does not work if it is in TAB1.HTML or the other tab pages. That is, I wish to have the link inside the TABx.HTML pages for the user to click. Is this possible?