Выделите ссылки на навигацию

Question

Я пытаюсь закончить свою навигацию для своего сайта. Я добавляю код jsfiddle, чтобы показать вам, какой у меня код. Моя проблема заключается в том, что мои дочерние ссылки становятся серыми, когда они предполагают, но я хочу сделать ссылку верхнего уровня, когда я нажимаю на этот серый цвет. Как я уже мои страницы помечены, как это

Page1
Page1a
Page1b
Page2
Page2a
.
.
.
ETC.

Мне нужно Page1 и Page2 стать серыми, как это делают подуровни. Если кто-нибудь может мне помочь, я бы очень признателен. Спасибо за ваше время.

http://jsfiddle.net/gUmYP/

<script type="text/javascript"> 
    $('#body').ready(function(){ 
      var URL = location.pathname.split("/"); 

      URL = URL[URL.length-1]; 
      //<![CDATA[ 
      for(var i = 0; i < 11; i++){ // 4 = number of items, if you add more increase it, make number 1 larger than total items. 
       if ((URL.indexOf(i) != -1) && (!$('#i'+i).is(':visible'))) { 
        $('#nav ul:visible').slideUp('normal'); 
        $('#i'+i).slideDown(0); 
        $('#i'+i) 
         .find('li') 
         .each(function() { 
          var current = $(this).find('a')[0]; 
          if (current.href == window.location.href) 
           current.style.backgroundColor = "#ccc"; 

          current.style.color = "#006"; 
         }); 
       } 
      } 
     }); 
</script> 

К сожалению, ни один из приведенных ниже ответов не решить мою проблему, некоторые из них сделали это так, родительская связь в настоящее время подчеркивается, но это делает другие функции не работают должным образом. Мне нужно, чтобы меню все еще выделялось желтым, когда я наводил на себя все, мне нужно, чтобы подменю все еще было голубым, когда оно неактивно, и мне нужны все активные ссылки (родительский или дочерний), чтобы показать серое выделение, что они активны ссылка. Кто-нибудь знает решение для решения всех этих проблем?

Ответ на эту проблему, можно найти на этом посту ... Active Link on javascript menu to work on parent link not just child link

Answer 1

Я переделал свой JQuery, как это казалось слишком сложным. Взгляните на результат на этом jsfiddle и дайте мне знать, если вы это делаете!

$("#nav > li").click(function() { 
    if ($(this).hasClass("selected")) { 
     $(".selected").removeClass("selected"); 
    } else { 
     $(".selected").children("ul").slideToggle(); 
     $(".selected").removeClass("selected"); 
     $(this).addClass("selected"); 
    } 
    $(".selected").children("ul").slideToggle(); 
}); 

http://jsfiddle.net/PBKxy/

Answer 2

вы можете сделать это следующим образом: http://jsfiddle.net/gUmYP/16/

$('#nav li a').each(function(){ 
      $(this).css('backgroundColor', '#006'); 
      $(this).css('color', '#CCC'); 
     }); 
     $(this).css('backgroundColor', '#ccc'); 
     $(this).css('color', '#066'); 

Answer 3

я уверен, что ваша логика управления, которая решает, в какой пункт меню будет заново окрашена в какое время требует некоторого пересмотра, поэтому я только изменил код, чтобы фактически изменить цвета ниже. here is the fiddle, который демонстрирует эффект, закодированный в пункте меню # 2.

отмечают, что если location.pathname заканчивается / вы, вероятно, хотите обратиться к элементу URL[URL.length-2] вместо URL[URL.length-1].

<script type="text/javascript"> 
    $('#body').ready(function(){ 
      var URL = location.pathname.split("/"); 

      URL = URL[URL.length-1]; 
      //<![CDATA[ 
      for(var i = 0; i < 11; i++){ // 4 = number of items, if you add more increase it, make number 1 larger than total items. 
       if ((URL.indexOf(i) != -1) && (!$('#i'+i).is(':visible'))) { 
        $('#nav ul:visible').slideUp('normal'); 
        $('#i'+i).slideDown(0); 
        $('#i'+i) 
         .find('li') 
         .each(function(idx, ex) { 
          var current = $(ex).find('a'); 
          if (current.href == window.location.href) { 
           current.css({ 
             backgroundColor: '#ccc' 
            , color:   '#006' 
           }); 
           $('#i'+i).prev('a').css({ 
             backgroundColor: '#ccc' 
            , color:   '#006' 
           }); 
          } 
         }); 
       } 
      } 
     }); 
</script>