HTML UL LI a href链接无法工作

Question

我正在制作一个网站，针对菜单的代码如下：

<header>
  <div class="sticky-nav">
    <a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>
    <nav id="menu">
      <ul id="menu-nav">
        <li><a href="http://aevidum.com">Home</a>
        </li>
        <li><a href="">Clubs</a>
        </li>
        <li><a href="">Campaigns</a>
        </li>
        <li><a href="">Movement</a>
        </li>
        <li><a href="">Events</a>
        </li>
        <li><a href="">The Talk</a>
        </li>
        <li><a href="">Resources</a>
        </li>
        <li><a href="">Donate</a>
        </li>
        <li><a href="">#Aevidum</a>
        </li>
        <li><a href="">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

但是当我点击主页链接时，它并没有跳转或执行任何操作。有人知道这个问题是什么吗？

这是我正在工作的目录链接：http://aevidum.com/brushed/

- Benjamin Porter

---

标记看起来很好。仅使用HTML，没有CSS或JS也可以完美运行。请参见：http://jsfiddle.net/y7r9g83k/结论：一定是JS的问题。 - David Lerner

你的 href 路径为空..... - Alex Char

认为这是你的JavaScript。 - Samuel

通过jQuery，为这些链接添加了两个监听器。它们可以防止链接起作用。代码是$('#mobile-nav').on('click', function(e){等等。 - Cheery

您的页面上也有JS错误：Uncaught TypeError: Object #<Object> has no method 'init'。 - progsource

Answer 1

我认为某些Java-script或jQuery函数正在覆盖您当前的功能，因为您发布的代码在没有任何包含的情况下正常工作。

<header>
  <div class="sticky-nav">
    <a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>
    <nav id="menu">
      <ul id="menu-nav">
        <li><a href="http://aevidum.com">Home</a>
        </li>
        <li><a href="">Clubs</a>
        </li>
        <li><a href="">Campaigns</a>
        </li>
        <li><a href="">Movement</a>
        </li>
        <li><a href="">Events</a>
        </li>
        <li><a href="">The Talk</a>
        </li>
        <li><a href="">Resources</a>
        </li>
        <li><a href="">Donate</a>
        </li>
        <li><a href="">#Aevidum</a>
        </li>
        <li><a href="">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

- Sunil Goli

---

是的，我也得出了相同的结论，感谢你指导方向。 - Benjamin Porter

Answer 2

我猜你可能正在使用Alessio Atzeni的Brushed模板？

我也遇到了同样的问题。以下是完整的导航部分，我在需要不是相对锚点的链接上添加了一个类'linkfix_LogIn'。

    <header>
    <div class="sticky-nav">
        <a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>

        <div id="logo">
            <a id="goUp" href="#home-slider" title="Home">Home</a>
        </div>

        <nav id="menu">
            <ul id="menu-nav">
                <li class="current"><a href="#home-slider">Home</a></li> 
                <li><a href="#about">What Is This</a></li>
                <li><a href="#contact">Contact</a></li>
                 <li class="linkfix_LogIn"><a href="http://www.YourURL.com">Outside Link</a></li>
            </ul>
        </nav>

    </div>
</header>

在main.js文件中，修改以下内容：在此函数中：

BRUSHED.listenerMenu = function(){

在底部添加这个小方法：

    // Fix outside links.
    $('.linkfix_LogIn a').on('click',function() {           
        window.location.href = "http://www.YourURL.com";  // Change This
});

- vr_driver

Answer 3

如果您使用的是"Alessio Atzeni的Brushed模板"，那么问题可能是由"plugin.js"引起的。

请从以下页面获取"jquery.nav.js"。 https://github.com/davist11/jQuery-One-Page-Nav 然后将"plugin.js"最后部分（大约30行到结尾处）中的"jQuery One Page Nav Plugin"代码用"jquery.nav.js"的内容覆盖。

我以这种方式解决了同样的问题。 希望能对某些人有所帮助。

- diceworks

---

这也解决了“Vesperr Bootstrap主题”（https://bootstrapmade.com/vesperr-free-bootstrap-template/）中的同样问题。 - Christian Baumann

Answer 4

可能是您模板附带的jQuery出现了问题。如果没有任何作用，请在“href”标签上使用JavaScript onclick函数进行重定向。

onclick="window.open('https://www.yoursite.com/mypage')"

如果您想提及目标类型，请改用此选项。

onclick="window.open('https://www.yoursite.com/mypage', '_blank')"

- Nikz

Answer 5

我曾经遇到过同样的问题。我只是在a标签上添加了display: block。这对我起作用了！

ul li a {
  display: block;
}

- Kapilnemo

---

实际上这可能是一个原因，因为 <a> 可能不会占用 li 元素中的全部空间，而只会占用文本所占据的空间。 - Tebe

Answer 6

按照这样的步骤进行，一切都会完美地运行。

    <ul  class="nav-links">
        <li> <a href="index.html">Home</a></li>
        <li> <a href="Tours.html">Tours</a></li>
        <li> <a href="Explore.html">Explore</a> </li>
        <li><a href="About.html">About</a></li>
    </ul>

- Joseph NISHIMWE

---

目前你的回答不够清晰。请编辑并添加更多细节，以帮助其他人理解它如何回答所提出的问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Community