Grow your CSS skills. Land your dream job.

jQuery navigation tabs

  • # July 28, 2010 at 11:28 pm

    This is probably a stupidly easy thing to do but I never really figured it out.

    What’s an easy way (not necessarily with jQuery) to have nav tabs be in a certain "on" state depending on which page you’re on?

    Here’s an example: http://www.dribbble.com/

    Possibly done easily with PHP? I’m not so good with PHP but am a fast learner and willing to learn.

    Thanks for any help!!

    # July 29, 2010 at 1:16 am

    You could have something like this:
    about.html

    Code:
    <body class="about">
    <ul>
    <li class="home"><a href="home.html">home</a></li>
    <li class="contact"><a href="home.html">home</a></li>
    <li class="about"><a href="home.html">home</a></li>
    </ul>
    </body>

    The CSS

    Code:
    ul li{background: red;}
    body.home ul li.home {background: green;}
    body.contact ul li.contact {background: green;}
    body.about ul li.about {background: green;}

    Where <body class="about"> is changed depending what page you are on

    # November 28, 2010 at 2:21 pm

    Very belated thanks jamy_za.

    I look at this post I wrote in July and it’s so trivial to me, haha.

    I was such a noob.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".