根據頁面使用javascript將類分配給li

-2

我有一個菜單結構位於由CMS控制的主頁上，除了javascript，CSS和原始HTML之外，我沒有編程可訪問性。它看起來像這樣：根據頁面使用javascript將類分配給li

<div id="menu"> 
<ul> 
<li><a href="Menu1.aspx" target="_self" class="active_nav">Menu Option 1</a></li> 
<li><a href="Menu2.aspx" target="_self">Menu Option 2</a></li> 
<li><a href="Menu3.aspx" target="_self">Menu Option 3</a></li> 
</ul> 
</div>

我需要改變.active_nav到他們在任何網頁的li。在javaScript或jQuery中最簡單的方法是什麼？

來源

2012-12-15 optionsix

什麼不育系您使用？它應該已經識別出你正在使用的頁面，就像身體標記上的類一樣 – elclanrs

CMS通常會生成帶有類的菜單，你擁有的是硬編碼標記 – undefined

一些輕的CMS可能不會生成菜單，但是它肯定會告訴你哪一頁你是一個ID或類或什麼...我的意思是哇t是CMS的重點，如果你硬編碼的一切... – elclanrs

$('#menu>ul>li').click(function() { 
    $('#menu>ul>li').removeClass('active_nav'); 
    $(this).addClass('active_nav'); 
});

默認情況下，您可能希望爲CSS類使用連字符。這是標準做法。畢竟，這不是Python。

此外，這不應該在客戶端或JavaScript的。每次用戶轉到其他頁面時JavaScript都會重新加載，這意味着您的鏈接只有在瀏覽器重定向到目標位置之前纔會有活動類。但是，一旦用戶導航到菜單項的鏈接，該菜單項將失去active_nav類，因爲根據您的服務器設置，JavaScript和其他所有內容將被重新加載，從捕獲或其他方面。

底線是，你需要從服務器端做到這一點。基本上，當使用PHP或任何其他服務器端語言來呈現頁面時，應該根據URL突出顯示當前項目。這是做事的常用方式。

完全在JavaScript中完成的唯一方法是如果您正在編寫Ajax應用程序，這意味着用戶實際上不會轉到其他頁面，而只能看到實時從服務器加載的不同內容。如果你告訴我你使用的服務器端語言，那麼我將能夠提供更多的幫助。

此外，Google可以提供幫助，因爲這是一個非常常見的問題。

來源

2012-12-15 22:42:15 flavian

這對OP沒有幫助;他聽起來好像沒有辦法確定當前頁面是什麼 - 因此無法使用此代碼將正確的元素作爲目標。此外，這將**給予'active_nav'類中的每個li元素，因爲這個選擇器會捕獲所有這些元素。 –

你會期望這是完成服務器端，我同意 - 不幸的是，OP表示他沒有訪問服務器端代碼。 **您的代碼仍然會影響每個菜單項;使他們都像這樣「活躍」。** –

Fergus是正確的，如果我有任何訪問CMS本身，我會走你的路線。所以，我很欣賞答案。 – optionsix

可能需要使用當前窗口的位置就知道應該強調什麼禮，這樣的事情（之前必須清除所有active_nav類：

$('#menu a').each(function() { 
     var currentUrl = document.URL; 
     if (currentUrl.indexOf($(this).attr('href')) <> -1){ 
     $(this).addClass('active_nav'); 
     } 
});

問候

來源

2012-12-15 22:54:21 LuisClemente

如果CMS不提供有關當前頁面的信息，可能是最好的解決方案;除了找到一個新的CMS;） –

根據頁面使用javascript將類分配給li

回答

相關問題