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/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment3.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 http://www.dynamicdrive.com/forums/images/buttons/edit.gif 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!