javascript - How to change the Menu colour when selected? -
I have created a menu in my ASP.NET website and I want to highlight the active menu item in the menu click This is usually the menu is white, but when the user selects any menu then it should be red, please search below which I have done so far:
Jquery:
& lt; Head runat = "server" & gt; & Lt; Script type = "text / javascript" & gt; $ ('Thumbnail'). Click (function (e) {$ ('thumbnail'). RemoveClass ('selected'); $ (this) .addClass ('selected');}); & Lt; / Script & gt; & Lt; asp: ContentPlaceHolder ID = "head" runat = "server" & gt; & Lt; / ASP: ContentPlaceHolder & gt; & Lt; / Head & gt; ASPX page:
& lt; Div id = "nav" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; a href = "Default.aspx" square = "thumbnail" & gt; Dashboard & lt; / A & gt; When I want this menu option to be red in the Dashboard page I & lt; Ul & gt; & Lt; a href = "Default.aspx" square = "hover" & gt; & Lt; Li & gt; Service Details & lt; / li & gt; & Lt; / A & gt; & Lt; a href = "dashboard_talasiers dili.expx" class = "hover" & gt; & Lt; Li & gt; Subscription history & lt; / li & gt; & Lt; / A & gt; & Lt; a href = "whitelist. espx" class = "hover" & gt; & Lt; Li & gt; Whitelist & lt; / li & gt; & Lt; / A & gt; & Lt; / Ul & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; a href = "mnggroup.aspx" square = "thumbnail" & gt; Subscriber & lt; / A & gt; // When I'm in this page, I want this Subscriber menu option to be red & lt; Ul & gt; & Lt; a href = "mnggroup.aspx" class = "hover" & gt; & Lt; Li & gt; Group & lt; / li & gt; & Lt; / A & gt; & Lt; A href = "#" square = "hover" & gt; & Lt; Li & gt; Subscriber Chart & lt; / li & gt; & Lt; / A & gt; & Lt; A href = "#" square = "hover" & gt; & Lt; Li & gt; Subscriber chart date & lt; / li & gt; & Lt; / A & gt; & Lt; A href = "#" square = "hover" & gt; & Lt; Li & gt; Inactive member chart & lt; / li & gt; & Lt; / A & gt; & Lt; / Ul & gt; & Lt; / li & gt; & Lt; / Div & gt; CSS:
. Thumbnail {display: block; Line-height: 2.5m Margin-right: 0 pixels; Padding: 8px 14px 8px 14px; Color: # 3d3737; font-weight: bold; Font-size: 0.8 AM; Text-decoration: None; } #nav ul li. Selected (color: #ffffff; background color: transparent; background-image: url (../img / navigative .jpg); background-repeat: repeat-x;} The above code is received from the link:
After all the above menu items after whitelisting, when I select any option, it is not red, please help. Thanks in advance.
The problem is in your CSS. The location is added between "Selected".
It should be "# nav ul li.selected". And add your code inside $ (document) at the same time .ready () function = Add code mentioned below in the HTMl "head"
Comments
Post a Comment