jQuery的CSS選擇的菜單問題

嗨選擇當我有改變菜單顏色的jQueryjQuery的CSS選擇的菜單問題

.selected{ 
    background-color: red; 
}

$("#nav-container>li").click(function(){ 
    $(this).addClass('selected') 
     .siblings() 
     .removeClass('selected'); 
});

的HTML如下：

<ul id="nav-container"> 
    <li id="welcome"> 
     <a href="/" >Welcome</a> 
    </li> 

    <li id="find"> 
     <a href="/find">Find</a> 
    </li> 

    <li id="talk"> 
     <a href="/talk">Talk</a> 
    </li> 

    <li id="events"> 
     <a href="/event">Events</a> 
    </li> 
</ul>

顏色變化發生，但當頁面處於新頁面或頁面時，將重新加載到新頁面，不再選擇顏色。我還沒有添加什麼？我在這裏錯過了什麼嗎？

來源

2012-10-25 d3bug3r

您需要一些方法來存儲跨頁請求的當前選定項目。你可以通過cookies來做到這一點，甚至可以在頁面中隱藏一個可以讀取值的字段。 –

換句話說，你缺少的是頁面生命週期的基本理解。 –

在服務器端做這個選擇 –

請記住，addClass的效果只對當前文檔有效。您可以使用SessionID和PHP

來源

2012-10-25 08:15:04

jQuery不知道在頁面重新加載後您選擇了哪一個，您必須通過服務器端代碼（php）或頁面加載設置selected類檢查哪個頁面你在jQuery中，並在元素上設置selected類。

來源

2012-10-25 08:15:28 Andy

你可以試試這個：

$(function(){ 
    var $ul = $("#nav-container"); 
    var path = window.location.pathname; 
    var $a = $('a[href="'+path+'"]', $ul); 
    if ($a && $a.length) { 
     var $li = $a.parent(); 
     $li.addClass('selected'); 
    } 
});

並刪除你的點擊功能。

來源

2012-10-25 08:23:13

這是正常行爲。 Javascript上下文特定於一個頁面。如果您重新加載頁面，即使某些HTML標記相同，它的Javascript設置屬性也將被重置。

您可以使用Cookie或服務器端代碼（會話）實現持久性元素高亮顯示。

您可以設置cookie like this，如果使用jquery-cookie plugin：

$("#nav-container>li").click(function(){ 
     $(this).addClass('selected') 
     .siblings() 
     .removeClass('selected'); 
     $.cookie("selected", $(this).attr('id'), { path: '/' }) 
}); 

$(document).ready(function() { 
     $("#" + $.cookie("selected")).addClass('selected') 
});

注：沒有測試此代碼，但它應該工作。當然，用戶需要啓用cookie才能使用它。

來源

2012-10-25 08:24:29 pistache

jQuery的CSS選擇的菜單問題

回答

相關問題