CSS highlight menu item based on page body tags
I have a menu, I would like to highlig开发者_如何学Pythonht the sub menu item based on the page they are in. Can I use a div tag with an id on the page, and in css if the id is there then highlight the item.
in body
<div id="doc3"></div>
then in css
#doc3 #menu li#subnav-5-1 a
I tried this but dosent seem to work. How can I change the style of another element based on id in the page body?
menu...
<!-- Menu 5 -->
<li id="nav-5"><a href="ssslate.do">Micro</a>
<ul id="subnav-5">
<li class="subnav-5-1"><a href="asdf.do">Site & Visit</a></li>
<li><a href="ss.do">MIC</a></li>
<li><a href="ss.do">sss</a></li>
</ul>
</li>
CSS
body.nav-5-1 li.subnav-5-1 {background-color:red;}
htmlbody
<body id=nav-5-body class="nav-5-1">
Thanks
Put a class on each item in the menu and then use sub-classing in your CSS to highlight the item based on the body.
So the body would have a class that defined the page:
<body class="userEdit">
And the menu items would have classes on them that were the same:
<li class="userView">
<li class="userEdit">
<li class="userAdd">
Then your CSS would look like:
body.userEdit li.userEdit {background-color:red;} /* selected colors go here */
However, this is an inefficient way to build a menu with a selected item. It would be better to simply determine which item is selected on the server and add a selected class to that item and then have .selected {background-color:red;} in your CSS. This would save bits and scale better.
You have not shown us your actual html structure.
The css style you have specified (#doc3 #menu li#subnav-5-1 a) will affect a html structure like this:
<div id="doc3">
<ul id="menu">
<li id="subnav-5-1"><a href="somePage.html">Some page</a></li>
</ul>
</div>
The style will be applied to the <a> tag.
加载中,请稍侯......
精彩评论