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

Question

I have a standard css/jquery menu where I use addClass/removeClass to set whatever li I am on to '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!

Just a question: If you follow that link, will the "content" link still be there on the next page? Because normally, if you follow a link, the content changes ;) (except you have this in a sidebar or similar). — Felix Kling
– Felix Kling, Commented Jul 13, 2010 at 6:41

Brock Adams · Accepted Answer · 2010-07-13 07:19:25Z

2

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.

edited Jul 13, 2010 at 7:19

answered Jul 13, 2010 at 7:04

Brock Adams

94k23 gold badges242 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felix Kling · Accepted Answer · 2010-07-13 06:51:18Z

1

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.

answered Jul 13, 2010 at 6:51

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Comments

Gabriel · Accepted Answer · 2010-07-13 06:47:23Z

0

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

answered Jul 13, 2010 at 6:47

Gabriel

18.8k2 gold badges40 silver badges45 bronze badges

Comments

Dylan · Accepted Answer · 2010-07-13 16:49:34Z

0

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!

edited Jul 13, 2010 at 16:49

answered Jul 13, 2010 at 16:33

Dylan

11 bronze badge

2 Comments

Felix Kling Over a year ago

You should edit your question instead of posting this as an answer. And please correct me, but I understood your question this way: You have a normal link inside your page content, which is most likely text in a paragraph. And you want to assign the current class also to links inside such content. So far so good. But those links don't have a parent li element, so you cannot assign the current class to a parent li element.

Brock Adams Over a year ago

@Felix Kling: Actually he should: (1) mark this question as answered, as he admits it was, (2) Make a new question out of this new information that wasn't included in the first place, (3) Register his first "Dylan" account and get a moderator to merge or delete his 2nd "Dylan" account.

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related