Ways to emphasize a navigation menu item that points to the same URL

Question

Ways to emphasize a navigation menu item that points to the same URL

One issue I am facing is with my navigation menu, where two items are pointing to the 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>

This means that Page2 and Page4 are both linked to the same URL.

[Update]

I am now looking for a way to make the selected link stand out when the user clicks on either Page2 or Page4, taking into consideration that the request then goes to link2. This needs to be done without using click events and preventDefault.

Since it's an MVC application, the request goes through a servlet (controller) and renders a JSP file. In this case, both Page2 and Page4 are linking to the same JSP file.

Below are the relevant files:

nav.jsp -- Navigation menu link2.jsp -- Contents specific to link2

I apologize for not providing these details earlier.

jquery html css

Answer 1

Answer №1

By clicking, you have the ability to extract the href attribute from the current anchor tag and find it in your menu.

$(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(); // prevent going to the link
  });
});

See a live demonstration on JS Bin

Answer 2

By clicking, you have the ability to extract the href attribute from the current anchor tag and find it in your menu.

$(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(); // prevent going to the link
  });
});

See a live demonstration on JS Bin

Answer 3

Answer №2

If you're looking to specifically emphasize the link that is clicked, the solution provided in the previous response should work perfectly for you. However, if your goal is to highlight a specific Anchor based on its href attribute value, you can achieve this by checking for the href attribute using jQuery:

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

Answer 4

If you're looking to specifically emphasize the link that is clicked, the solution provided in the previous response should work perfectly for you. However, if your goal is to highlight a specific Anchor based on its href attribute value, you can achieve this by checking for the href attribute using jQuery:

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

Answer 5

Answer №3

Try out this example:

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

To see the changes, include 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();
});

You can access the working solution here

Answer 6

Try out this example:

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

To see the changes, include 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();
});

You can access the working solution here

Answer 7

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>

You can enhance the conditional statement further by using pure Javascript instead of jQuery, depending on browser support (classList not supported in IE 9). While not necessary for performance, it's beneficial to reduce reliance on jQuery:

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

UPDATE:

This dynamic alternative improves upon the previous method. By looping through all links except the clicked one using some(), the script checks if any of them match the current link. Based on the result (true or false), it determines whether to add the highlight class:

$(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>

Answer 8

$(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 can enhance the conditional statement further by using pure Javascript instead of jQuery, depending on browser support (classList not supported in IE 9). While not necessary for performance, it's beneficial to reduce reliance on jQuery:

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

UPDATE:

This dynamic alternative improves upon the previous method. By looping through all links except the clicked one using some(), the script checks if any of them match the current link. Based on the result (true or false), it determines whether to add the highlight class:

$(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>

Ways to emphasize a navigation menu item that points to the same URL

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Having difficulty with PHP code, attempting to output some HTML while also opening a file and displaying its contents

Custom 404 Page by Google

Encountering an issue when adding SASS Compass Breakpoint to my development project

Tips and tricks for locating the xpath of a header title using Selenium Webdriver and Java

Creating reliable dynamic selects with a MySQL database, PHP, and jQuery

File.type cannot be obtained in IE 11 and IE Edge due to compatibility issues

Can React JSX and non-JSX components be combined in a single project?

Using PHP and an HTML form to input multiple data entries into a MySQL database

Steps to create full screen jQuery tabs with overflow scroll feature in the content

What is the recommended alternative for the outdated or non-standard "align" element in use?

Navigating following an AJAX form submission

The Unshift function in Reactjs uses Jquery to dynamically generate new buttons whenever it is clicked

Transferring a JSON payload to a PHP script without relying on AJAX

Matching CSS attribute values with another attribute

The collapsible menu does not toggle when I tap on the icon

Determine if the chosen option is present in any of the four arrays using Jquery/HTML, and execute a specific function based

Revising a value that is influenced by the fluctuations of another value, and conversely

Detaching the jQuery event where the context is tied to the handler

How to ensure an image or ad stays in a fixed position on the screen

Conceal portion in HTML until revealed