Results 1 to 4 of 4

Thread: Tab Content Script - "current" tab question

  1. #1
    Join Date
    Oct 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Tab Content Script - "current" tab question

    Script: Tab Content Script
    http://www.dynamicdrive.com/dynamici...tabcontent.htm

    For the most part, the Tab Content Script works very well, except for identifying the current tab.

    The style sheet has the following rule:

    Code:
    #tablist li a.current{
    background: lightyellow;
    }
    ...and the HTML code has the following:

    Code:
    <ul id="tablist">
    <li><a href="http://www.dynamicdrive.com" class="current" onClick="return expandcontent('sc1', this)">Dynamic Drive</a></li>
    <li><a href="new.htm" onClick="return expandcontent('sc2', this)" theme="#EAEAFF">What's New</a></li>
    It appears that the class="current" is hardcoded and not dynamically asigned by the script. Is that intentional? So the first tab (id=sc1) is always assigned the "current" class identifer?

    I would like to be able to style the current or active tab, but am not able to with the code as it is. I would like to know if this is an oversight or intentional. If it's an oversight, any idea how to fix it?

    Thank you!
    Last edited by trichins; 10-18-2005 at 08:40 PM.

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

    Default

    Hi:
    By design, the style of the current active tab (ie: its background color) also spills over to the content beneath it. So for example, if you were to modify:

    Code:
    #tablist li a.current{
    background: lime;
    }
    lime will now not only be the background color of the current active tab, but the content it references as well. This is intentional, to allow the webmaster to easily style an entire tab content. Now, you can specify a theme to change the color for different tabs, but again, this affects both the tab and its content:

    Code:
    <li><a href="hot.htm" onClick="return expandcontent('sc3', this)" theme="#FFE6E6">What's Hot</a></li>
    This behavior above is by design. I can look into updating this script to support highlight only by tabs, and not the tab contents as well if the demand is there.

  3. #3
    Join Date
    Oct 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you for the reply. I understand now - the style sheet rule comes into effect if no theme is applied. I was looking for a way to not show a bottom border for the active tab and couldn't make it work properly because the tab themes were over-riding the style sheet. I think the script is fine as is.

    Thanks!

  4. #4
    Join Date
    Oct 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    One more question -- how can I modify the script to make the bottom border of the tabs the same as the "theme" color? That way I can have the tabs and the content the same color without a border under the active tab.

    Thank you for your consideration.

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
  •