liamloveslearning Posted November 10, 2010 Share Posted November 10, 2010 Hi all, I have a tabbed navigation showing a hidden div relating to the tabbed link clicked. I want to set the active state so my users know which tab they are on. my css is... #tabbar {background-image:url(../images/tab-bg.jpg); background-repeat:repeat-x; height:30px;} #tabbar a{padding:4px 6px; float:left; display:block; height:32px; color:#666; text-decoration:none; font-weight:bold; text-shadow: white 0px 1px 0px; } #tabbar a:hover{color:#666; background-image:url(../images/act-tab-bg.jpg); height:22px; display:block; background-repeat:repeat-x;} #tabbar a.tablink:active{color:#ff0000; background-image:url(../images/act-tab-bg.jpg); height:22px; display:block; background-repeat:repeat-x;} and my html.. <div id="tabbar"> <a href="#tab1" class="tablink">Itinery</a> <a href="#tab2" class="tablink">FAQ's</a> <a href="#tab3" class="tablink">Locations</a> </div> Quote Link to comment Share on other sites More sharing options...
nano Posted November 10, 2010 Share Posted November 10, 2010 Where is the DIV that should be shown when you select an anchor tag? A better approach for this functionality would be done through JavaScript or jQuery - this then gives you the option of adding a selected class on your navigation item. Quote Link to comment Share on other sites More sharing options...
haku Posted November 10, 2010 Share Posted November 10, 2010 :active is a deceiving name, as it does NOT relate to the page you are on. This is the state that happens after a link is clicked, before the next page has reloaded. If you want a state that is relative to the page you are on, you can do this in your CSS by setting an ID on your body tag for each page, then using that ID to hit the element for the page you are on. Ex: page 1 HTML: <body id="page1"> <ul> <li id="link1">Page 1 link</li> <li id="link2">Page 2 link</li> </ul> </body> Page 2 HTML: <body id="page2"> <ul> <li id="link1">Page 1 link</li> <li id="link2">Page 2 link</li> </ul> </body> CSS: li {color:blue;} #page1 #link1, #page2 #link2 {color:red;} Quote Link to comment Share on other sites More sharing options...
liamloveslearning Posted November 11, 2010 Author Share Posted November 11, 2010 thanks guys Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.