CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1652920
user1652920

Reputation: 149

Highlighting onclick menu link

I am having trouble keeping the 'current' link highlighted. The links are simply layed out like:

Home | About | Jordon

For example, once a user clicks on a link, that particular link will get highlighted.

I've tried using this function:

$(document).ready(function() {
$("#menu li a").click(function (e) {
        e.preventDefault();
        $("#menu li a").addClass("current").not(this).removeClass("current");
}); 
});

HTML

  <div class="main">
        <div id="menu">
            <ul>
                <li><a onclick="window.location='index.action'" href="#" class="current">Home</a></li>
                <li><a onclick="window.location='about.action?c=azuki'" href="#">About</a></li>
                <li><a onclick="window.location='about.action?c=jordon'" href="#">Jordon</a></li>
                <li>                </ul>           </div>
                </div>

CSS

#menu li a.current {color:#3558b0}

Upvotes: 1

Views: 5349

Answers (4)

Vikram
Vikram

Reputation: 4192

If you can get rid of onclick (i.e. using href) then you can do this with CSS ONLY. You dont require jQuery code. See here:

CSS:

#menu li a.current {color:#3558b0}

#menu li a:active,
#menu li a:focus{
 color:#fff;
background-color:red;   
}

HTML

<div class="main">
        <div id="menu">
            <ul>
                <li><a  href="#" class="current">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a  href="#">Jordon</a></li>
                <li>                </ul>           </div>
                </div>

Heres a jfiddle: http://jsfiddle.net/fUL3w/10/

Upvotes: 0

Brad Christie
Brad Christie

Reputation: 101614

Element-level events are going to fire before jQuery (or any other library that's attached). Your problem is execution order.

Try this for starters:

<div id="menu">
  <a onclick="alert('First');">Helllo, World!</a>
</div>

$('a').on('click',function(e){
  alert('Second');
  e.preventDefault();
  return false;
});

onclick fires and sets the window.location before jQuery has a chance to preventDefault()/cancel the event. My advice is to use href as it was intended and make your jQuery adjustments atop HTML.

Rule of thumb: Keep Markup for markup and scripting for scripting; don't mix. (avoid using the onclick attribute for example).

If you follow that rule, you're backwards compatible for older browsers/those with JavaScript disabled while still offering extended functionality for newer ones. Chances are you'll also save bandwidth by allowing cached functionality now instead of repeated tasks embedded in every tag.

With that being said, try this:

<div id="menu">
  <ul>
    <li><a href="index.action" class="current">Home</a></li>
    <li><a href="about.action?c=azuki">About</a></li>
    <li><a href="about.action?c=jordon">Jordon</a></li>
  </ul>
</div>

$(function() {
    $('#menu a').on('click',function (e) {
        var $this = $(this);
        $this.closest('ul').find('a').removeClass('current');
        $this.addClass('current');
        e.preventDefault();
    }); 
});

I'm still not sure what you're hoping to accomplish though because after window.location loads any class you have applied will be moot on the next page visit (unless you're using AJAX). You can, however, reference $this.prop('href') though and use it in the click event for whatever you may need to.

Upvotes: 0

defau1t
defau1t

Reputation: 10619

Though your JQuery code is valid, but your markup is not proper. I have put the following working demo for you:

JsFIDDLE

Upvotes: 0

dsgriffin
dsgriffin

Reputation: 68616

$('#menu').on( 'click', 'a', function() {
$('#menu a').removeClass( 'current' );
$(this).addClass( 'current' );
});

Upvotes: 2

Related Questions