treehouse : what would you like to learn today?
Web Design Web Development iOS Development

How to keep the current tab active(colored)?

  • 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.

  • @sayedtaqui, try this

    h5 a.active,
    h5 a.active:hover {
      styles
    }
    
  • 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
  •   <h5 class="show-less "><span ></span>Network Inbox<div class="toggle"></div></h5>   
    
  • How about like this than

          h5.active,
          h5.active:hover {
          styles
          }
    
  • 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
  • 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;
    }
    
  • 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. ):

  • 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.

  • 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.

  • 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.