Grow your CSS skills. Land your dream job.

How to keep the current tab active(colored)?

  • # December 25, 2012 at 6:08 am

    I was trying to keep the color of the current tab active(colored) in my page however its not happening by assigning a class to each li
    because the current is tab in h5 tag.
    I know how to keep the current pages tab active in the main navigation bar however its not happening here.
    ebusinesssocial.com/dashboard/ (you would be required to login so here is the login info facebook2x2@gmail.com 123456)
    Left navigation.

    # December 25, 2012 at 7:17 am

    @sayedtaqui, try this

    h5 a.active,
    h5 a.active:hover {
    styles
    }

    # December 25, 2012 at 7:35 am

    Thanks for the reply Jurotek but the line doesn’t have a link. So ‘a’ will not work here.
    the code is this

    Network Inbox

    # December 25, 2012 at 7:39 am
    Network Inbox
    # December 25, 2012 at 7:55 am

    How about like this than

    h5.active,
    h5.active:hover {
    styles
    }

    # December 25, 2012 at 8:11 am

    Have tried that already jurotek , didn’t work.
    Probably I m making some mistake , can you please elaborate a little this is the code I have entered
    #sidebar.viewport-content, #sidebar-inbox h5.active,{
    background-color:#39F;
    color:#aaa;
    line-height:25px;
    }

    #sidebar.viewport-content, #sidebar-inbox h5.active:hover {
    background-color:#39F;
    color:#aaa;
    line-height:25px;
    }

    and the html is this

    Network Inbox
    # December 25, 2012 at 8:25 am

    this is what I see in your css

    #sidebar h5 {
    cursor: pointer;
    position: relative;
    margin: 0;
    padding: 5px 0 5px 10px;
    font-size: 16px;
    background-color: #C0C0C0;
    }
    #sidebar h5:hover{
    background-color: #3399FF;
    color:#FFF;
    }
    #sidebar h5:active{
    background-color: #3399FF;
    color:#FFF;
    }

    change this

    #sidebar h5:active{
    background-color: #3399FF;
    color:#FFF;
    }

    to this

    #sidebar h5.active, #sidebar h5.active:hover{
    background-color: #3399FF;
    color:#FFF;
    }

    # December 25, 2012 at 9:01 am

    I applied this css however its only making the first tab colored but not the rest in colum.(since I have applied the active class only in the first tab as I dont know what to do with it)
    and if I apply the active call in all the tabs they become permanently blue.
    ):

    # December 25, 2012 at 9:19 am

    I see what you saying. It would work with new page url, but since the url stays the same but only content changes based on selection of h5 children in accordion this will not work. Now, this is way beyond my knowledge how to accomplish that. It will prolly take more than just css to make that happen. I don’t know. I am sure someone with more experience will know what to do. Sorry.

    # December 25, 2012 at 9:24 am

    That’s ok. I appreciate your effort that you put to solve this. Probably I’ll have to start a new discussion later because no one else is replying here.

    # December 25, 2012 at 9:34 am

    Just give some time. It’s Holiday and people got better things to do than starring at puter. I am single with dead wife and grown up kids far away so I got nothing better to do than this :)

    Edit: That didn’t come out right. Should have said, my wife is dead.

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

You must be logged in to reply to this topic.

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