如何突出顯示導航菜單，指相同的URL

Question

我有一個導航菜單，其中有兩個項目指的是相同的URL。

<div id="LEFTmenu"> 
    <ul> 
    <li><a href="app/link1">Page1</a></li> 
    <li><a href="app/link2">Page2</a></li> 
    <li><a href="app/link3">Page3</a></li> 
    <li><a href="app/link2">Page4</a></li> 
    <li><a href="app/link5">Page5</a></li> 
</ul> 
</div> 

此處Page2 & Page4指向相同的URL。

[更新]

如何當用戶點擊第二頁或4頁和之後的請求是向前突出LINK2所選擇的鏈接/項目。所以我不能在點擊事件中使用此事件並使用preventDefault。

這是一個MVC應用程序，所以請求轉到一個servlet（控制器）並呈現一個JSP。所以Page2和Page4指向一個相同的JSP文件。

文件：

nav.jsp - 導航菜單 link2.jsp - 具體到LINK2

道歉不提前提供這些細節內容。

Answer 1

使用此：

HTML

<div id="LEFTmenu"> 
    <ul> 
    <li><a href="app/link1">Page1</a></li> 
    <li><a href="app/link2">Page2</a></li> 
    <li><a href="app/link3">Page3</a></li> 
    <li><a href="app/link2">Page4</a></li> 
    <li><a href="app/link5">Page5</a></li> 
    </ul> 
</div> 

JS

我用e.preventDefault();供您查看變化。

$('a').click(function(e){ 
    $('a').css('background-color',''); 
    e.preventDefault(); 
}); 
$('a[href="app/link2"]').click(function(e){ 
    $('a').css('background-color',''); 
    $(this).css('background-color','yellow'); 
    e.preventDefault(); 
}); 

這裏，如果你想突出你點擊鏈接工作solution

Answer 2

以前的答案應該做的伎倆。但如果你只是想突出錨與特定href，只是檢查了它的attr：

$('#LEFTmenu a').click(function(e){ 
    e.preventDefault(); 
    if ($(this).attr("href") == "app/link2") { 
    $(this).css("color", "yellow"); 
    } 
}); 

Answer 3

點擊就可以提取當前定位標記的href屬性，並在它的菜單進行搜索。

$(function() { 
    $('#LEFTmenu a').on('click', function(e) { 
    var $this = $(this), 
     $ul = $(this).parents('ul'), 
     href = $this.attr('href'); 
    $ul.find('a[href="'+href+'"]').css('background', 'lime'); 

    e.preventDefault(); // do not go to link 
    }); 
}); 

Working example on JS Bin

Answer 4

$(function() { 
 
    var $menuLinks = $('#LEFTmenu a'); 
 

 
    $menuLinks.on('click', function(e) { 
 
    e.preventDefault(); 
 

 
    if ($(this).attr('href') === 'app/link2') { 
 
     $(this).addClass('highlight'); 
 
    } 
 
    
 
    $menuLinks.not(this).removeClass('highlight'); 
 
    }); 
 
});

.highlight { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="LEFTmenu"> 
 
    <ul> 
 
    <li><a href="app/link1">Page1</a></li> 
 
    <li><a href="app/link2">Page2</a></li> 
 
    <li><a href="app/link3">Page3</a></li> 
 
    <li><a href="app/link2">Page4</a></li> 
 
    <li><a href="app/link5">Page5</a></li> 
 
</ul> 
 
</div>

你甚至可以在你的條件藉此更進一步，走純JavaScript，這取決於你的瀏覽器支持（IE 9不支持classList ）。沒有必要，不會讓一個巨大的性能差異，但我總是喜歡去沒有jQuery的時候，我可以：

if (this.getAttribute('href') === 'app/link2') { 
    this.classList.add('highlight'); 
} 

UPDATE：

這裏有一個更好的，更具活力的alternativethan上面的一個。在這裏，我們通過所有鏈接，除了點擊一個使用some()。如果它們中的任何一個匹配當前點擊鏈接，則它將返回true或false。然後，我們使用這個值來決定是否我們的類添加到鏈接

$(function() { 
 
    var $menuLinks = $('#LEFTmenu a'); 
 

 
    $menuLinks.on('click', function(e) { 
 
    e.preventDefault(); 
 
    
 
    var that = this; 
 
    
 
    var linkHasDuplicate = [].some.call($menuLinks.not(this), function(elem) { 
 
     return elem.getAttribute('href') === that.getAttribute('href'); 
 
    }); 
 
    
 
    if (linkHasDuplicate) { 
 
     $(this).addClass('highlight'); 
 
    } 
 
    
 
    $menuLinks.not(this).removeClass('highlight'); 
 
    }); 
 
});

.highlight { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="LEFTmenu"> 
 
    <ul> 
 
    <li><a href="app/link1">Page1</a></li> 
 
    <li><a href="app/link2">Page2</a></li> 
 
    <li><a href="app/link3">Page3</a></li> 
 
    <li><a href="app/link2">Page4</a></li> 
 
    <li><a href="app/link5">Page5</a></li> 
 
</ul> 
 
</div>