只有在导航栏中工作的锚链接答案

【问题标题】：Only anchor links working in nav bar只有在导航栏中工作的锚链接
【发布时间】：2014-12-17 22:41:23
【问题描述】：

所以我正在使用网站模板，我想做的更改之一是使用联系链接。使用默认模板，导航栏中的所有链接都是指向页面不同部分的锚链接。我想更改联系链接，使其成为 mailto 链接，但我发现由于某种原因，外部链接在导航栏中不起作用。

我的问题是模板由一大堆 CSS 和 JS 文档组成，我不知道代码的哪一部分会导致这个问题。外部链接可以在页面的其他地方使用，但不能在导航栏中使用。你们知道什么样的代码可能会导致这种情况，以便我更好地了解在哪里解决问题？

不管怎样，代码如下所示：

    <section id="intro">
        <nav id="nav" style="background:-webkit-canvas(background) repeat;">
            <nav id="nav-1" style="background:-moz-element(#background) repeat;">
            <!-- The content between <span> </span> tags will be hidden on mobile version -->
            <ul class="clearfix">
                <li><a href="#education">Edu<span>cation</span></a></li>
                <li><a href="#portfolio">Por<span>tfolio</span></a></li>
                <li><a href="#experience">Exp<span>erience</span></a></li>
                <li><a href="#contact">Con<span>tact</span></a></li>
            </ul>
            </nav>
        </nav>
    </section>

【问题讨论】：

拥有相关的 CSS 对帮助您至关重要。
当你说“不工作”时——你能更具体一点吗？当您将 mailto: 链接放入其中时，实际会发生什么？
我认为如果您可以共享指向相关网站的链接会最简单，因为正如您自己提到的，您不知道代码的哪一部分或哪个文件产生了这种行为.

标签： javascript jquery html css

【解决方案1】：

像这样向元素添加 Javascript 或 Jquery 点击处理程序：

$("a[href=#contact]").on("click", function() {
    //Your code Here...
});

【讨论】：

【解决方案2】：

感谢您的所有建议，但实际上我只是收到了设计师的回复：

整个介绍导航是使用 jQuery 制作的一系列相同页面链接名为 jQuery One Page Nav 的插件。您可以在此处了解更多信息：

https://github.com/davist11/jQuery-One-Page-Nav

在assets/js/custom.curriculum.js 文件中，您可以找到启用此导航的脚本行：

$( '#nav ul' ).onePageNav( { scrollSpeed: 400 } );

基于插件，您可以通过类添加异常。所以假设你想要一个链接以保持其默认操作，您将向该链接添加一个“外部”类，然后然后，将JS文件中的代码替换为以下代码，即添加 “外部”类的例外情况：

$( '#nav ul' ).onePageNav( { scrollSpeed: 400, filter: ':not(.external)' } );

【讨论】：