Та же страница SubNav на нескольких страницах сайта - PullRequest
Новая
       37

Та же страница SubNav на нескольких страницах сайта

0 голосов
/ 15 ноября 2011

Я пытаюсь изменить CSS якоря, включенного в <li> подменю. Вот HTML-код: 

<ul id="nav">
   <li class="subnav current"><a href="page1.html">Page1</a>
      <ul>
         <li><a href="page1.html#section1a">Page 1 Section A</a></li>
         <li><a href="page1.html#section1b">Page 1 Section B</a></li>
         <li><a href="page1.html#section1c">Page 1 Section C</a></li>
      </ul>
   </li>
   <li class="subnav"><a href="page2.html">Page2</a>
      <ul>
         <li><a href="page2.html#section2a">Page 2 Section A</a></li>
         <li><a href="page2.html#section2b">Page 2 Section B</a></li>
         <li><a href="page2.html#section2c">Page 2 Section C</a></li>
     </ul>
   </li>
<ul>

Каждая секция имеет ширину 1060 пикселей, плавающий слева, и все секции включены в контейнер div, переполнение которого скрыто. Вот скрипт, который я пробовал: 

$(document).ready(function() {
   var P=($(".section").position().left)*-1
   var N=(P/1060)+1
   $("#nav li.current ul li:first-child").find("a").css("color","#e53f33");
   $("#nav li.current ul li:nth-child(N)").click(function(){
      $(this).siblings().find("a").css("color","#777777");
      $(this).find("a").css("color","#e53f33");
   });
});

Этот скрипт отлично работает, когда я остаюсь на той же странице. Но, т. Е. Когда я нахожусь на странице 1 и щелкаю ссылку, расположенную на странице 2, CSS первого ребенка изменяется, даже если я нажал на другого ребенка. Где моя ошибка?

Вы можете увидеть, что здесь происходит http://www.theworkingowl.com.

1 Ответ

0 голосов
/ 15 ноября 2011

Для начала, почему бы вам не поместить события щелчков на якоря? Кроме того, подход nth-child здесь не тот, который вам нужен. Вы подумали о применении / удалении классов вместо этого? 

$(document).ready(function() {
   // take care of direct hash links...
   var relative_url = window.location.href.substr(window.location.protocol.length+window.location.hostname.length+3);
   $('a[href="'+relative_url+'"]').addClass('current').parent().siblings().find('a').css('color', '#777');

   // take care of clicks that stay on this page...
   $('#nav a').click(function() {
     $(this).parent().addClass('current').siblings().removeClass('current');
   });
});

А потом твой CSS ... 

#nav a { color:#777777; }
#nav li.current a { color:#e53f33; }
...