导航链接损坏？答案

【问题标题】：Broken Nav Links?导航链接损坏？
【发布时间】：2015-03-10 16:48:42
【问题描述】：

出于某种原因，this website-in-process 上的代码不允许我点击导航栏中的链接。 Home、FAQ 和 About 链接都应该是活动的，但什么都没有发生。在我目前已编码并可供预览的所有三个页面上都是这种情况。（如果您查看代码，会列出联系人链接，但它没有链接到任何内容；这是暂时的，目前是故意的。）

当您尝试点击这些链接时，问题就来了。没有任何反应，也没有打开新页面。但是，如果您右键单击它们，然后选择“在新选项卡中打开链接”，它们就可以正常工作。我不知道出了什么问题，感觉应该很容易修复。

有什么建议吗？

--编辑--

有问题的导航代码：

<nav id="fixedbar">
    <div class="nav-content">
        <ul class="navmain navfixed">
            <a href="http://www.kadehall.com/preview/awards/"><li class="navspot">home</li></a>
            <a href="#"><li class="navspot">store</li></a>
            <a href="#"><li class="navspot">gallery</li></a>
            <a href="http://www.kadehall.com/preview/awards/faq/"><li class="navspot stay" id="end-leftnav">FAQ</li></a>
            <li><a href="#top"><img src="parts/header/column-circle.png" id="columncircle"/></a></li>
            <a href="http://www.kadehall.com/preview/awards/about/"><li class="navspot" id="start-rightnav">about</li></a>
            <a href="http://www.kadehall.com/preview/awards/contact/"><li class="navspot">contact</li></a>
            <!-- start social -->
            <li class="navsoc">
                <a href="#"><img src="parts/social/facebook.png" /></a>
                <a href="#"><img src="parts/social/etsy.png" /></a>
                <a href="#"><img src="parts/social/pinterest.png" /></a>
            </li>
        </ul>
    </div>
</nav>
<!-- There is also an alternate nav for when the page is not scrolling,
     but the only difference is the use of id="fixedbar" -->

【问题讨论】：

请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点 - 否则，一旦问题得到解决，这个问题将对未来的访问者失去任何价值。发布证明您的问题的Short, Self Contained, Correct Example (SSCCE) 将帮助您获得更好的答案。有关详细信息，请参阅 Something on my web site doesn't work. Can I just paste a link to it? 谢谢！

标签： html hyperlink nav

【解决方案1】：

这是 JavaScript 的问题。

在269 行查看FAQ 页面的html 源代码：

$('#navigation a, #fixedbar a').on('click', function(e) {
e.preventDefault();
});

preventDefault() 函数会在您单击链接时取消默认事件。

【讨论】：

我以为你在谈论 JavaScript 代码。好的，HTML 不是 W3C 正确的，但这永远不会阻止要点击的链接。

【解决方案2】：

你需要把你的a标签放在li里面，这是你当前的代码

什么时候应该：

<li><a href="">About</a></li>

等

【讨论】：

【解决方案3】：

<ul> 标签只能有一个<li> 作为它的子标签。由于您的<a> 在您的<li> 之外，因此<a> 标签被推出<ul>。

在您的<li> 中插入那些<a> 标签

【讨论】：

【解决方案4】：

您的 HTML 结构不正确。

<ul class="navmain">
  <a href="/awards">
    <li class="navspot">home</li>
  </a>
</ul>

应该是

<ul class="navmain">
  <li class="navspot">
    <a href="/awards">home</a>
  </li>
</ul>

除了ul 或ol 列表中的li 元素之外，您不能嵌套任何内容。

【讨论】：