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> Link to comment https://forums.phpfreaks.com/topic/218300-css-active-state-not-working/ 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. Link to comment https://forums.phpfreaks.com/topic/218300-css-active-state-not-working/#findComment-1132665 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;} Link to comment https://forums.phpfreaks.com/topic/218300-css-active-state-not-working/#findComment-1132675 Share on other sites More sharing options...
liamloveslearning Posted November 11, 2010 Author Share Posted November 11, 2010 thanks guys Link to comment https://forums.phpfreaks.com/topic/218300-css-active-state-not-working/#findComment-1133009 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.