Question

我有一个页面header.html，我将其用作每个网页的标题。我在标题中有菜单项。我想使用javascript / jquery动态突出显示当前的网页菜单。任何人都可以帮助我吗？

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>

Answer 1

首先使用window.location和正则表达式

查找页面

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

Answer 2

试试这个

<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

如何在每个页面上动态突出显示菜单项？

2 个答案: