jQuery: Selected Link Won't Work

24 Posts

wayne.yellow Reply #1, 15 years, 4 months ago

Hi,

I wrote a jQuery to detect wich menu is selected so that the selected menu will have different color. It works find if I click on the href="#" but not on any links that has for e.g. href="[[~1]]"

My code as below:

<script type="text/javascript" src="assets/js/jquery-162.js"></script>
<script type="text/javascript">
<!--
jQuery.noConflict();
jQuery(document).ready(function(){
	jQuery('#nav li').click(function() {
		jQuery('#nav li.current').removeClass('current');
		jQuery(this).addClass('current');
	});
});
//-->
</script>

<ul id="nav">
  <li><a href="[[~1]]">Home</a></li>
  <li><a href="[[~2]]">Articles</a></li>
  <li><a href="#">Links</a></li>
  <li><a href="[[~3]]">Gallery</a></li>
  <li><a href="[[~4]]">Contact Us</a></li>
</ul>

I am using MODX 2.0.6-pl2(traditional).
Can anyone please help. Thanks a lot.

Wayne.

- 863 Posts
Lucas Reply #2, 15 years, 4 months ago
Actually what is happening there is the function is firing when you click on a #nav li element, not the link. If you want it to fire when you click a link, change your code to this:
```
jQuery('#nav a').click(function()
```
But... have you considered using Wayfinder to generate your menu? It will by default insert an ’active’ class to the current menu item and parent documents.