Question

我有一个标准的css / jquery菜单，我在其中使用addClass / removeClass来设置我所在的li为'current'。但是，执行此操作的代码使用$(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）设置'current'类而不是（a）。这也只是1页。我正在使用jquery scrollTo来滑动onClicks。

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

我正在尝试将此与jquery lavalamp结合使用，即使'current'类正确应用于右侧（li），我仍然无法将可视当前指示器粘贴到右侧菜单项。

更全面的是，我在（头部）的代码是：

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

});

感谢您提供进一步的帮助！

jQuery：在辅助链接的菜单中设置'active'类

4 个答案: