Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts

    Selected Tab Highlight

    Hi all.
    I have a UL TAB menu where I would like to apply a different style to the selected or current tab. How would I do this?? My code so far is below.
    Code:
    <style>
    ul#tabnav {
    font:  NORMAL 10px verdana, arial, sans-serif;
    list-style-type: none;
    padding-bottom: 24px;
    border-bottom: 2px solid #AAAAAA;
    margin: 10px 0px 1px 0px;
    }
    ul#tabnav li {
    float: left;
    height: 20px;
    background-color: #C8C8C8;
    margin: 2px 0px 0 1px;
    border: 1px solid #AAAAAA;
    }
    body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 {
    border-bottom: 1px solid #fff;
    margin: 0px 0px 0 2px;
    }
    body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a {
    color: #FFFFFF;
    }
    #tabnav a {
    float: left;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    padding: 4px;
    }
    #tabnav a:hover {
    background: #808080;
    }
    </style>
    
    
    <ul id="tabnav">
     <li class="tab4"><a href="#"><</a></li>
     <li class="tab4"><a href="#">S</a></li>
     <li class="tab4"><a href="#">></a></li>
    </ul>

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    You would need some PHP
    basically when you are at the page it inserts class="current"
    for example
    Code:
    #tabnav li { background: white;}
    .current { background: green; }
    
    <ul id="tabnav">
     <li class="current"><a href="#">Home</a></li>
     <li><a href="#">page2</a></li>
     <li><a href="#">not current</a></li>
    </ul>
    http://www.alistapart.com/articles/keepingcurrent/
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •