Grow your CSS skills. Land your dream job.

Highlight selected tab

  • # February 26, 2012 at 10:56 am

    I am using tabbed navigation using jquery.I have used this tutorial from “css-tricks”.But I want to modify this code so that I can highlight active tab.I have coded click event of anchor tag, but it is not working.Please help me, Thanks in advance.
    anchor tag click event code added by me is:

    		$("div.hoverBtn").children("a").click(function(){
    $(this).parent().children("div")
    .stop()
    .css({"display": "block", "opacity": "1"})
    .fadeIn("fast");
    });
    # February 26, 2012 at 12:11 pm

    I normal add or remove a class with jquery and then just style .active{} to be what you want it to look like when active

    # February 26, 2012 at 12:33 pm

    I agree with karlpcrowley. Also, I think this can happen automatically somewhat like this:

    $(document).ready(function(){
    $currenturl = location.href;
    $('a[href=$currenturl]').addClass('selected');
    });
    # February 26, 2012 at 12:53 pm

    don’t forget to removeClass before you at the ‘selected’

    # February 26, 2012 at 4:04 pm

    thank u karlpcrowley and schart.That worked perfectly.

    # March 8, 2012 at 7:03 pm

    sagy_1991, can you post the code here please? i’m trying to highlight a tab that links to the same page (top, middle, bottom). but i can’t get to work.

    thanks in advance.

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

You must be logged in to reply to this topic.

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