CSS выделение пункта меню на основе тегов тела страницы - PullRequest
Новая
       9

CSS выделение пункта меню на основе тегов тела страницы

0 голосов
/ 18 мая 2010

У меня есть меню, я хотел бы выделить пункт подменю на основе страницы, на которой они находятся. Могу ли я использовать тег div с идентификатором на странице, и в css, если идентификатор есть, выделите элемент ,

в теле 

<div id="doc3"></div>

затем в CSS 

#doc3 #menu li#subnav-5-1 a

Я пытался это сделать, но, похоже, dosent работает. Как изменить стиль другого элемента на основе идентификатора в теле страницы?

меню ... 

<!-- 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">

Спасибо

Ответы [ 2 ]

3 голосов
/ 18 мая 2010

Поместите класс на каждый элемент в меню, а затем используйте подклассы в вашем CSS, чтобы выделить элемент на основе тела.

Таким образом, тело будет иметь класс, который определил страницу: 

<body class="userEdit">

И пункты меню будут иметь классы, которые будут одинаковыми: 

<li class="userView">
<li class="userEdit">
<li class="userAdd">

Тогда ваш CSS будет выглядеть так: 

body.userEdit li.userEdit {background-color:red;} /* selected colors go here */

Однако это неэффективный способ создания меню с выбранным элементом . Было бы лучше просто определить, какой элемент выбран на сервере, добавить класс selected к этому элементу, а затем добавить в свой CSS .selected {background-color:red;}. Это сэкономит биты и улучшит масштаб.

0 голосов
/ 18 мая 2010

Вы не показали нам свою фактическую структуру HTML.
Указанный вами стиль css (#doc3 #menu li#subnav-5-1 a) будет влиять на структуру html следующим образом: 

<div id="doc3">
  <ul id="menu">
    <li id="subnav-5-1"><a href="somePage.html">Some page</a></li>
  </ul>
</div>

Стиль будет применен к тегу <a>.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...