a.active question

I am like a 4/10 when it comes to web programming. I have the tabs working, it's a very nice script by the way. Heres my question:

Is their something you need to enable to get class="active" to display on the active tab. Plus my tabs are images, that when active are just a darker version of the image. I'm hoping this is possible somehow.

Posted July 23rd, 2007 at 1:48am by medj

Hello,

You shouldn't need to do anything to get the 'active' class added to the active tab's link element. If it's not happening, can you show us some code so we can work out why?

As for using different images for active tabs, I'd set the images using CSS's background-image property on your link selector, then define a .active selector on the link and just point background-image at the active image file.

Good luck!

Ben

Posted July 23rd, 2007 at 4:11am by bbodien

    <ul id="tabnav">
            <li><a href="#home" style="background: url(/img/tabs/home.png) no-repeat;"></a></li>
            <li><a href="#company" style="background: url(/img/tabs/company.png) no-repeat;"></a></li>
            </ul>

That's the code, and from what I understood, class="active" should just appear on the active tab. I checked the source of my page and this is not happening.

By the way, you can see my site at Nexiety.com

Posted July 23rd, 2007 at 10:54am by medj

I checkec your "computed" source in firefox (source of selection). This was generated:

So you could handle the active item by CSS with something like:

ul#tabnav li a.active { }

Posted July 24th, 2007 at 4:51am by Roland

@Ryan: Build an EDIT function plz :(

@Medj: So, your computed source...

<ul id="tabnav">
            <li><a class="" href="#home" style="background: transparent url(/img/tabs/home.png) no-repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"></a></li>
            <li><a class="active" href="#portfolio" style="background: transparent url(/img/tabs/portfolio.png) no-repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"></a></li>
            <li><a class="" href="#contact" style="background: transparent url(/img/tabs/contactus.png) no-repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"></a></li>
            </ul>

Posted July 24th, 2007 at 4:53am by Roland

That is very strange since in my CSS I already had this:

ul#tabnav li a.active {
background: #ddd;
}

And how do you see a computed source rather then a regular source. Cause in Firefox when I click view source, I don't see that class="active"

Posted July 24th, 2007 at 9:31am by medj

Ha, I just realized my problem. It was in the CSS, well indirectly.

That background:#ddd; that I tried to apply wasn't going to do anything since in the actual HTML source, I specified a background.

To fix this all I did was add !important in the external stylesheet, like so:

ul#tabnav li a.active {
background: #ddd!important;
}

Thanks again for all your help!

Posted July 24th, 2007 at 9:37am by medj