Results 1 to 3 of 3

Thread: Can I change the TAB background color to selected without clicking the TAB?

  1. #1
    Join Date
    May 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Can I change the TAB background color to selected without clicking the TAB?

    1) Script Title: tabbed document viewer

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...bdocviewer.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)

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    <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.
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    owlee (05-04-2009)

  4. #3
    Join Date
    May 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •