开发者

CSS highlight menu item based on page body tags

开发者 https://www.devze.com 2022-12-30 12:43 出处:网络
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 th

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消