Using css "active tab" technique on single page

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

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;
}

...

Answer 2

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"><a href="#a1">Creativity</a></li>
    <li class="minimalism"><a href="#a2">Minimalism</a></li>
    <li class="youthfulness"><a href="#a3">Youthfulness</a></li>
    <li class="kuler"><a href="#a4">Kuler</a></li>
    <li class="design"><a href="#a5">Design</a></li>
  </ul>
  <p>Lorem ispum...</p>
</div>

<div id="a2" class="section minimalism">
  <ul class="nav">
    <li class="creativity"><a href="#a1">Creativity</a></li>
    <li class="minimalism"><a href="#a2">Minimalism</a></li>
    <li class="youthfulness"><a href="#a3">Youthfulness</a></li>
    <li class="kuler"><a href="#a4">Kuler</a></li>
    <li class="design"><a href="#a5">Design</a></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