如何在每個頁面上突出顯示菜單項dynamicaly？

我有一個頁面header.html，我用它作爲每個網頁的標題。標題中有菜單項。我想使用javascript/jquery動態地突出顯示當前的網頁菜單。誰能幫我？如何在每個頁面上突出顯示菜單項dynamicaly？

HTML：

<ul class="navigation"> 
<li class="highlight"><a href="index.html" class="highlight">Home</a></li> 
<li><a href="subnet.html">IP Discovery and Password Management</a></li> 
<li><a href="test_management.html">Test Management</a></li> 
<li><a href="test_dut.cgi">DUT Management</a></li> 
<li><a href="test_execmain.cgi">Test Execution</a></li> 
<li><a href="result.cgi">Results</a></li> 
</ul>

來源

2014-02-10 user3217945

請告訴我們你到目前爲止嘗試了些什麼。 – Sgoldy

你使用哪種服務器端語言？或者你在使用ajax？你如何在每個頁面中實現標題？這是相當重要的信息... –

@KristofFeys我使用的HTML有一些Perl集成。我打電話給其他頁面。＆不使用ajax – user3217945

首先找到使用window.location正則表達式的頁面，然後

jQuery(function($){ 
    var page = window.location.href.match(/[^/]+$/)[0]; 
    $('.navigation li a[href="' + page + '"]').parent().addBack().addClass('highlight') 
})

來源

2014-02-10 09:49:20

試試這個

<script type="text/javascript"> 
    jQuery(document).ready(function($){ 
     // Get current url 
     // Select an a element that has the matching href and apply a class of 'active'. Also prepend a - to the content of the link 
     var url = window.location.href; 
     $('.menu a[href="'+url+'"]').addClass('current_page_item'); 
    }); 
</script>

參考：http://www.paulund.co.uk/use-jquery-to-highlight-active-menu-item

來源

2014-02-10 09:52:16

如何在每個頁面上突出顯示菜單項dynamicaly？

回答

相關問題