javascript - jQuery:从辅助链接在菜单中设置 'active' 类

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.