Ajax Tabs: How to style individual tabs using the <a> tag attribute?

[pstrick]

1) Script Title: Ajax Tabs: How to style individual tabs using the <a> tag attribute?

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uppliment3.htm

3) Describe problem: I would like to find a way to individually style the <a> tag of each tab. When the script runs, it automatically removes all styles within the <a> link. For example below the I am able to apply the CSS class "WORKS" but I can't apply the style "NOTWORKING:

<ul id="countrytabs" class="shadetabs">
<li class="WORKS"><a href="external1.htm" rel="#iframe" class="NOTWORKING">Page 1</a></li>
<li class=""><a href="external2.htm" rel="countrycontainer">Page 2</a></li>
</ul>

Does this make sense? Any ideas?

Thank-you!

[Snookerman]

Try:

.works a {
style: style;
}

That will target all anchors inside elements with the class works.

Good luck!

[pstrick]

Thanks for the response!

What is interesting is that I can get it to work using inline styles:

<ul id="countrytabs" class="shadetabs">
<li class=""><a href="external2.htm" rel="countrycontainer" style="font-size:22px;">Page 2</a></li>
</ul>

But it will not work with class names. I tried what you suggested, but what comes seems to work in Dreamweaver preview is:

.shadetabs li a.works{
font-size:22px;
}

and

<ul id="countrytabs" class="shadetabs">
<li class=""><a href="external2.htm" rel="countrycontainer" class="works" >Page 2</a></li>
</ul>

But it does not show up in the browser.

I think the program is stripping out all of the anchor class names.

Any ideas about a way around this would be very useful!

Thanks again!

[Snookerman]

You misunderstood me. If you can apply a class to the list item but not to the anchor tag, you can use CSS to target all anchor tags inside list items with a certain class value. The markup would look like this:

<ul id="countrytabs" class="shadetabs">
<li class="classvalue"><a href="external2.htm" rel="countrycontainer">Page 2</a></li>
</ul>

and the CSS like this:

li.classvalue a {
font-size: 22px;
}

You could also target all anchor tags in the unordered list:

ul.shadetabs a {
font-size: 22px;
}

Oh, and don't use Dw preview to code or test your sites, use the code view to write the markup and then use a real browser to test the pages.

Good luck!

[pstrick]

That works great- thanks so much!

[Snookerman]

You're welcome, glad to help!
You can go to your first post in this thread, click then click Go Advanced and add the Resolved prefix to the thread title.
This will let other users know the problem has been solved.

Good luck with your site!