菜單中突出顯示的當前頁面

我試圖讓我的菜單突出顯示當前從該菜單中選擇的頁面。菜單中突出顯示的當前頁面

我的HTML代碼看起來像這樣：

<div class="menu-container"> 
    <div class="menu-wrapper"> 
     <ul id="menu"> 
      <li class="current"><a href="#">HOME</a></li> 
      <li><a href="#">ABOUT US</a></li> 
      <li><a href="#">SERVICES</a></li> 
      <li><a href="#">CONTACT US</a></li> 
      <li><a href="#">PHOTOS</a></li> 
     </ul> 
    </div> 
</div>

首先，這是正確的方式做highlight the current page in menu的？該計劃是爲每個html頁面手動將class="current"更改爲相應的頁面。

其次，我該如何獲得格式更改？什麼訂單是否#menu,li和.current必須出現在？我已經試過：

#menu li .current{ 
    background: #f00; 
}

，但沒有運氣。

來源

2013-07-26 Serge P

刪除li和.current之間的空格。

#menu li .current意思是「在#menu之內的li內的.current類的任何元素」。

#menu li.current的意思是「li.current裏面#menu」。

是的，可以將class="current"添加到每個頁面上的當前菜單項。

來源

2013-07-26 07:05:55 pawel

thx！簡單的解釋:) –

刪除li和.current之間的空格。

#menu li.current{ 
    background: #f00; 
}

當您針對具有特定類的元素時，該類應始終直接位於該元素之後。如果沒有，你的目標是具有指定類的元素的任何子元素。

來源

2013-07-26 07:04:52

試試這個

http://jsfiddle.net/ePtFq/1/

或使用JS

$(document).ready(function (e) { 
      var page = top.location.toString().split('/'); 
      $('#menu').find('a[href="' + page[page.length - 1].toString() + '"]').closest('li').addClass('current'); 
     });

來源

2013-07-26 07:07:13 falguni

這可能會工作，但它會爲剛剛開始並想學習基本CSS選擇器用法的人帶來許多麻煩。你甚至沒有解釋它的作用以及爲什麼你會推薦這個解決方案。 – pawel

使用這個簡單的Javascript

function LoadCurrentMenu() 
    { 
     var str=location.href.toLowerCase(); 
     $("#menu li a").each(function() { 
      if (str.indexOf($(this).attr("href").toLowerCase()) > -1) { 
       $("li.current").removeClass("current"); 
       $(this).parent().addClass("current"); 
      } 
     }); 
     $("li.current").parents().each(function(){ 
      if ($(this).is("li")){ 
       $(this).addClass("current"); 
      } 
     }); 
    }

，並呼籲對身體負荷情況下，本功能類似下面

<body onload="LoadCurrentMenu();"> 
</body>

來源

2014-12-08 10:45:38

菜單中突出顯示的當前頁面

回答

相關問題