Hi guys, new to the forum and I'm hoping one of you can help me out with a problem with active tabs: I'm trying to create active tabs for my navigation bar. I know of one way to do this: create a new class for whatever tab you want to make active with the properties you want and then insert that class into the <a href> section after the url. Example: .tab a:link.active, .cssnav a:visited.active { color: green; } and then plug this into the HTML: <div class="tab"><a href="/im" title="Home" class="active"> But you have to manually insert that definining class call into whatever tab/link you want to be active. However, whenever you click on another link within the nav bar, let's say the "FAQ" tab, unless I plugged in all my CSS code into the FAQ page and removed the class="active" definition from the Home link and put it into the FAQ href to define it as the active link, the Home tab remains litup green while the FAQ link remains unchanged. I use one style sheet for all the pages on this site and I'm really stuck as to how to create dymamically behaving active tabs that correspond to the "active" page without manually going into each page and assigning a corresponding "class=active" into the <a href> of that exact page. Can you guys help me out? I'm not the best at explaining this so if you need clarification please ask and I'll do my best. Thanks in advance. Alex
One way to achieve what you want is to use descendant selectors in your CSS which will automatically apply the active state to the appropriate tab. To go about this, you need to assign an id to the body tag of each page and to each link in the navigation. For example, the home page might include <body id="home"> and in the the navigation <a href="/" id="linkhome"> etc. The descendant selector statement used in the CSS would then look like: body#home a#linkhome, body#about a#linkabout { color: #777777; } Code (markup): and would apply whatever styling you want to the active tab for tha appropriate page without having to change the coding of individual pages.