jQuery: set 'active' class in menu from secondary link

I have a standard css/jquery menu where I use addClass/removeClass to set whatever li I am on to '开发者_Go百科current'. However, the code to do this uses $(this). I want to also do this same set of procedures from links not in the menu. For example, I would like the menu 'active' flag to be in the right place after following a page link that is somewhere buried in the page content and not in the menu itself.

Menu HTML

<ul class="nav2">
<li class="current"><a href="#tab-1" rel="panel">Page one</a></li>
<li><a href="#tab-2" rel="panel">Page two</a></li>
<li><a href="#tab-3" rel="panel">Page three</a></li>
<li><a href="#tab-4" rel="panel">Page four</a></li>
</ul>

Page HTML

<p>Herein you will find a further description of
    <a href="#tab-2" rel="panel">page two</a>.

Javascript

$('a[rel=panel]').click(function (e) {
    $('a[rel=panel]').parent('li').removeClass('current');
    $(this).parent().addClass('current');

    //$("a [href='" + $(this).attr('href') + "']").parent('li').addClass('current');
});

(The commented out line is my failed attempt to make the "secondary" link act just like the "primary" link in the menu.)

Help? Thanks!

This should work:

$('a[rel=panel]').click
(
    function (e) 
    {
        $('.current').removeClass ('current');

        var Targ = $(e.target).attr ('href');
        if (Targ)
            $("ul.nav2 a[href*='" + Targ + "']").parent ().addClass ('current');
    }
);

.
See it in action at jsbin.

As the link (a element) inside the content has no list item (li) element as parent (it is p and you don't show further ancestors), it should just be:

$("a [href='" + $(this).attr('href') + "']").addClass('current');

But that assumes that you defined you CSS accordingly and the class current has effects when attached to a link element.

$('a[rel=panel]').click(function (e) {
  $('a[rel=panel]').parent('li').removeClass('current');
  // $(this).parent("li").addClass('current');
  $(".nav2 a[href='" + $(this).attr('href') + "']").parent('li').addClass('current');
});​

this worked fine over at:

http://jsfiddle.net/s2vxe/

let me know if you need more in this one.

Thanks for the help, I see what you guys are doing, but it isn't working for what I need.

@ Felix: I need to set 'current' class for the parent (li) not for (a). Also this is all just 1 page. I am using jquery scrollTo to slide things around onClicks.

@ Brock: Your example works perfectly, however:

I am trying to use this in conjunction with jquery lavalamp, and even though the 'current' class gets correctly applied to the right (li) I still cannot get the visual current indicator to stick to the right menu item.

More fully, my code in (head) is:

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/scrollto.js"></script>
<script type="text/javascript">
  $(function() {
    $(".nav2").lavaLamp({fx: "backout", speed: 500, click: function(event, menuItem) {
    return true;
  } }); });
</script>

where scrollto.js contains

$(document).ready(function() {  

//Get the height of the first item
$('#mask').css({'height':$('#tab-1').height()});        

//Calculate the total width - sum of all sub-panels width
//Width is generated according to the width of #mask * total of sub-panels
$('#panel').width(parseInt($('#mask').width() * $('#panel div.tab').length));

//Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
$('#panel div.tab').width($('#mask').width());

//Get all the links with rel as panel
$('a[rel=panel]').click(function (e) {

    //Get the height of the sub-panel
    var panelheight = $($(this).attr('href')).height();

    //Resize the height
    $('#mask').animate({'height':panelheight},{queue:false, duration:500});         

    //Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
    $('#mask').scrollTo($(this).attr('href'), 800); 

    //Set class for the selected item
    //.parent() added for toggling li classes instead of a classes
    //$('a[rel=panel]').parent('li').removeClass('current');
    $('.current').removeClass ('current');

    //$(this).parent().addClass('current');
    var Targ = $(e.target).attr ('href');
    if (Targ) {
        $("ul.nav2 a[href*='" + Targ + "']").parent ().addClass ('current');
    }
    //Discard the link default behavior
    //return false;
    e.preventDefault();
});

$('#mask').scrollTo('#tab-1', 400 );

});

Thanks for any further help!