html - CSS state for current menu page? -
To get started, I have an automated list that holds my menus.
& lt; Ul id = 'css3menu1' class = 'top menu' & gt; & Lt; Li class = 'top menu' & gt; & Lt; A href = 'home.html' & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = 'top menu' & gt; & Lt; A href = 'forum.php' & gt; Forums & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = 'top menu' & gt; & Lt; A href = 'policy.html' & gt; Policy & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = 'top menu' & gt; & Lt; A href = 'logout.php' & gt; Logout & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; What I want to do when the user is on the page, the hover state becomes active In other words, change the background color of the menu item with a dark color on which the user's Depends on the page.
< Div class = "post-text" itemprop = "text">
If you are interested in a jQuery solution
& lt; Script & gt; $ (Function () {$ ('# css3menu1 li a [href =' '+ location.href.split (' / '). Pop () +' "] '). AddClass (' active ');}); & Lt; / script & gt;
.active {background: # f1f1f1; border-top: 3px solid # lead ce; * Note: Please enter the script before & lt; / body & gt; and definitely include the jQuery library in the head section of your document.
Comments
Post a Comment