0

我再次需要你的帮助。我有一个带导航的功能区。它并没有真正做任何事情，它只是从活动/可见“切换”链接，这没关系。但是，我想实现这一点，如果用户点击外部链接（示例中 profile-nav 中的第三个 li），它会将他带到链接中的 url。非常感谢你！

HTML： 

<div class="ribbon">
    <nav>
        <ul class="profile-nav">
              <li class="active"><a href="#" title="My Account">My Account</a></li>
              <li><a href="#" title="Login">Login</a></li>
              <li><a href="http://www.google.com" title="External link">External link</a></li>
        </ul>
        <ul class="lang-nav">
            <li class="active"><a href="#" title="English (US)">English (US)</a></li>
            <li><a href="#" title="English (UK)">English (UK)</a></li>
            <li><a href="#" title="Deutsch">Deutsch</a></li>
            <li><a href="#" title="Italiano">Italiano</a></li>
            <li><a href="#" title="Русский">Русский</a></li>
        </ul>
        <ul class="currency-nav">
            <li class="active"><a href="#" title="$US Dollar">$US Dollar</a></li>
            <li><a href="#" title="€ Euro">€ Euro</a></li>
            <li><a href="#" title="£ Pound">£ Pound</a></li>
        </ul>
    </nav>
</div>

JAVASCRIPT

$(document).ready(function () {
        $('.ribbon li').hide();
    $('.ribbon li.active').show();
    $(".ribbon li a").click(function() {
        $(".ribbon li").hide();
        if ($(this).parent().parent().hasClass('open'))
            $(this).parent().parent().removeClass('open');
        else {
            $(".ribbon ul").removeClass('open');
            $(this).parent().parent().addClass('open');
        }
        $(this).parent().siblings().each(function() {
            $(this).removeClass('active');
        });
        $(this).parent().attr('class', 'active'); 
        $('.ribbon li.active').show();
        $('.ribbon ul.open li').show();
        return false;
    });
});
4

1 回答 1

0

有很多方法可以实现您想要的。按照您的方法，我建议class="nolink"您在不需要遵循外部链接的锚点中添加一个。之后将点击事件绑定到相应的“a.nolink”。

HTML 如下所示：

<div class="ribbon">
    <nav>
        <ul class="profile-nav">
          <li class="active"><a href="#" class="nolink" title="My Account">My Account</a></li>
          <li><a href="#" class="nolink" title="Login">Login</a></li>
          <li><a href="http://www.google.com" title="External link">External link</a>            </li>
        </ul>
        <ul class="lang-nav">
            <li class="active"><a href="#" class="nolink" title="English (US)">English (US)</a></li>
            <li><a href="#" class="nolink" title="English (UK)">English (UK)</a></li>
            <li><a href="#" class="nolink" title="Deutsch">Deutsch</a></li>
            <li><a href="#" class="nolink" title="Italiano">Italiano</a></li>
            <li><a href="#" class="nolink" title="Русский">Русский</a></li>
        </ul>
        <ul class="currency-nav">
            <li class="active"><a href="#" class="nolink" title="$US Dollar">$US Dollar</a></li>
            <li><a href="#" class="nolink" title="€ Euro">€ Euro</a></li>
            <li><a href="#" class="nolink" title="£ Pound">£ Pound</a></li>
        </ul>
    </nav>
</div>

和绑定你的元素的javascript：

$(".ribbon li a.nolink").click(function() { ...
于 2013-04-03T12:32:38.083 回答