2013-03-09 95 views
0

我有一個加載每一頁上我的應用程序下面的腳本:jQuery的導航活動類恢復頁面重新加載

  $(document).ready(function() { 
      $('ul li').click(function(){ 
      $("li").removeClass("current_page_item"); 
      $(this).addClass("current_page_item"); 
      }); 
     }); 

我的導航HTML如下:

   <ul id="dropmenu"> 
        <li class="active"> 
         <%= link_to 'Home Page', welcome_index_path %>      
        </li> 
        <li> 
         <%= link_to 'Business Owners', business_owners_path %> 

        </li> 
       </ul> 

每次我點擊「業主」鏈接,用於識別活動頁面的圖像首先從主頁鏈接移至業務負責人鏈接,然後在頁面重新加載時再次快速恢復到主頁鏈接。 jQuery中有一種方法可以在頁面加載後保持「活動」鏈接的狀態嗎?

+0

你可以發表你的HTML輸出嗎? – darshanags 2013-03-09 19:58:25

+2

我猜你實際上必須加載新的頁面,並返回false是不是一個選項?如果是這樣,用JavaScript做的更改將無法正常工作。您可能需要cookies /本地存儲,或者只是在HTML中對其進行編碼,或者在服務器端執行邏輯。 – adeneo 2013-03-09 20:01:08

+0

下面是HTML輸出

2013-03-09 22:34:55

回答

1

沒有更多的信息,我相信你可能會以這種錯誤的方式。您是否嘗試使用深層鏈接來顯示/加載額外的內容?如果是這樣,您的網頁不應該重新加載。你可以使用jQuery地址來實現這一點。 http://www.asual.com/jquery/address/

如果你的頁面實際上鍊接到一個單獨的頁面,那麼這可以通過CSS完成。一種解決方案是將類設置爲正確設置活動導航的主體。

HTML

<body class="business"> 

    <ul id="dropmenu"> 
     <li class="nav-home"><a href="#">Home</a></li> 
     <li class="nav-business"><a href="#">Business</a></li> 
    </ul> 

</body> 



CSS

#dropmenu a { 
    display:block; 
} 
#dropmenu a:hover { 
    border:1px solid #ccc; 
} 

* active */ 
.business .nav-business { 
    border:1px solid #000; 
} 

相關小提琴:http://jsfiddle.net/tNpVr/