Reputation: 787
I have a navigation menu which has two items refers to same 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>
Here Page2 & Page4 points to same URL.
[Update]
how to highlight the selected link/item when user clicks on Page2 or Page4 and after the request is forward to link2. So I cannot do this in click event and use preventDefault on the event.
It's an MVC application, so the request goes to a servlet(controller) and renders a JSP. So Page2 and Page4 is pointing to a same JSP file.
Files:
nav.jsp -- Navigation menu link2.jsp -- Contents specific to link2
Apologies for not to provide these details earlier.
Upvotes: 2
Views: 242
Reputation: 14474
$(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>
You could even take this a step further in your conditional and go pure Javascript, depending on your browser support (IE 9 doesn't support classList). Not necessary and won't make a huge performance difference but I always like to go without jquery when I can:
if (this.getAttribute('href') === 'app/link2') {
this.classList.add('highlight');
}
UPDATE:
Here's a better, more dynamic alternativethan the one above. Here we're looping through all the links except the clicked one using some(). If any of them match the current, clicked link then it'll either return true
or false
. We then use this value to determine whether we add the class to the link
$(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>
Upvotes: -1
Reputation: 48437
Use this:
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
I use e.preventDefault();
for you to view changes.
$('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();
});
Here is a working solution
Upvotes: 0
Reputation: 1373
On click you can extract the href
attribute of the current anchor tag and search in your menu for it.
$(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
});
});
Upvotes: 1
Reputation: 363
The previous answer should do the trick if you want to highlight the link you click. But if you just want to highlight the Anchor with a specific href
, just check for it's attr
:
$('#LEFTmenu a').click(function(e){
e.preventDefault();
if ($(this).attr("href") == "app/link2") {
$(this).css("color", "yellow");
}
});
Upvotes: 0