Javascript导航外部链接

我再次需要你的帮助。我有一个可以导航的功能区。它实际上并没有做任何事情，只是将链接从活动/可见状态“切换”，这是正常的。但是，我想实现的是，如果用户单击外部链接（示例中profile nav中的第三个li），它会将用户带到链接中的url。多谢各位

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

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>

---

有很多方法可以实现你想要的。按照您的方法，我建议向锚添加一个

class=“nolink”

，您不需要遵循外部链接。之后，将click事件绑定到相应的“a.nolink”

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

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>

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

---

不客气。如果这真的对您有帮助，请将答案标记为正确答案（在我回复旁边的复选框中）。你应该对另一个问题也这样做。Stackoverflow是一个声誉社区，这样做对我和你都有帮助。干杯