CODEWITHSUNDEEP
jqueryhtmlcss
Shunmugavel Krishnan
Shunmugavel Krishnan

Reputation: 787

How to highlight navigation menu that refers same URL

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

Answers (4)

Carl Edwards
Carl Edwards

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

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

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

secelite
secelite

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
  });
});

Working example on JS Bin

Upvotes: 1

Hoang Vu
Hoang Vu

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

Related Questions