Using css "active tab" technique on single page - php

Question

I'm building a navigation system using jquery scrollto. I have my navigation menu in a separate file (( navigation.php )). It is included in 5 locations on the first page (( 5 different sections w/ text following each )). I'm trying to figure out a way to have the current "tab" highlight'd. I could hard code the navigation in each location to ensure it shows up the correct way, but I'd rather use the phpinclude() method. The other issue is that each "tab" has it's own unique color (( cmykd )). Here is the alpha version of what I'm doing (( when you click && the page slides, the "active tab" still stays grey -- I'd like it to be the corresponding color )).
Hope this all makes sense && thanks in advance !!

Answer 1

Few things first.
You have the same <ul> in multiple places, each with the same id. Same with the multiple <li> elements sharing IDs. This is not only invalid HTML but just a bad practice in general.
Secondly, your document outline is backwards. Your text is in <h2> elements whereas your navigation/headers are in <h3> elements. This is also invalid and a bad practice.
Next, let's talk about rest of the HTML for your navigation bars (which are doubling as section headers) and their content sections. Let's look at new HTML for two of them (Creativity and Minimalism)
<div id="a1" class="section creativity">
<ul class="nav">
<li class="creativity">Creativity</li>
<li class="minimalism">Minimalism</li>
<li class="youthfulness">Youthfulness</li>
<li class="kuler">Kuler</li>
<li class="design">Design</li>
</ul>
<p>Lorem ispum...</p>
</div>
<div id="a2" class="section minimalism">
<ul class="nav">
<li class="creativity">Creativity</li>
<li class="minimalism">Minimalism</li>
<li class="youthfulness">Youthfulness</li>
<li class="kuler">Kuler</li>
<li class="design">Design</li>
</ul>
<p>Lorem ispum...</p>
</div>
The key takeaways here are
Semantic use of elements
Semantic use of class names
No behavior
Next, the CSS changes
div.section ul.nav {
font: 35px 'ChunkFiveRegular', Arial, sans-serif;
letter-spacing: 0;
padding: 0px;
margin: 0px;
border-top: 1px solid black;
border-bottom: 1px solid black;
width:100%;
list-style-type: none;
}
div.section ul.nav li {
display:inline;
padding: 0px;
margin: 0px;
}
div.section p {
font: 36px 'ChunkFiveRegular', Arial, sans-serif;
letter-spacing: 0;
}
div.section.active ul.nav li a {
color: #ddd;
}
a:link {color:#999; text-decoration: none;}
a:visited {color:#999; text-decoration: none;}
a:hover {color:#000; text-decoration: none;}
li.creativity a:hover, div.creativity.active li.creativity a {color:#00ffff !important;}
li.minimalism a:hover, div.minimalism.active li.minimalism a {color:#ff00ff !important;}
li.youthfulness a:hover, div.youthfulness.active li.youthfulness a {color:#ffff00 !important;}
li.kuler a:hover, div.kuler.active li.kuler a {color:#000000 !important;}
li.design a:hover, div.design.active li.design a {color:#666666 !important;}
Key takeaways here are
Semantic use of class names
Inheritance based coloring
And finally, the modification to your jQuery
jQuery.noConflict();
jQuery(function($)
{
$("ul.nav li a").click(function( event )
{
event.preventDefault();
var target = $(this).attr( 'href' );
$.scrollTo(
target.replace( '#', '' )
, { duration: 800
, axis: "y"
, onAfter: function()
{
$( 'div.section.active' ).removeClass( 'active' );
$( target ).addClass( 'active' );
}
}
);
});
$(".return-top").click(function()
{
$.scrollTo("body", {duration: 800, axis:"y"});
});
});
Key takeaways here are
Behavior removed from links is added here
Now relies on CSS classes, not IDs

Answer 2

Once you change your multiple ids to classes (since ids must be unique), you could do something like this:
.a1 .q1 a
{
color: cyan;
}
.a2 .q2 a
{
color: magenta;
}
...