jQuery：从辅助链接在菜单中设置“活动”类

Question

我有一个标准的 css/jquery 菜单，我使用 addClass/removeClass 将 li 设置为“当前”。但是，执行此操作的代码使用$(this)。我还想通过不在菜单中的链接执行同样的一组程序。例如，在点击隐藏在页面内容中而不是菜单本身的某个页面链接之后，我希望菜单“活动”标志位于正确的位置。

菜单 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>

页面 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');
});

（注释掉的行是我试图使“辅助”链接像菜单中的“主要”链接一样的失败尝试。）

帮助？谢谢！

Answer 1

这应该可行：

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

Answer 2

由于内容中的链接（a 元素）没有列表项（li）元素作为父元素（它是p，并且您没有显示更多的祖先），它应该只是：

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

但这假设您相应地定义了 CSS，并且 current 类在附加到链接元素时具有效果。

Answer 3

$('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');
});​

这在以下位置运行良好：

http://jsfiddle.net/s2vxe/

如果您需要更多内容，请告诉我。

Answer 4

感谢您的帮助，我知道你们在做什么，但它不能满足我的需要。

@Felix：我需要为父级 (li) 而不是 (a) 设置“当前”类。这也只是一页。我正在使用 jquery scrollTo 在 onClicks 周围滑动东西。

@Brock：你的例子很完美，但是：

我正在尝试将它与 jquery lavalamp 结合使用，即使“当前”类正确应用到右侧 (li)，我仍然无法让可视当前指示器粘在正确的菜单项上。

更全面地说，我在 (head) 中的代码是：

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

scrollto.js 包含在哪里

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

});

感谢您的进一步帮助！