为什么我的 href 链接不起作用？

Question

我对 Web 编程有点陌生，并且已经广泛尝试自己解决这个问题，但对于我的一生，我无法弄清楚，我非常感谢任何和所有帮助。

我基本上是在制作一个导航栏，我试图让它链接到我的其他 html 页面，但它不起作用。我使用以下代码。

HTML

<header>
    <div class="banner"> <!-- contains main banner and logo -->
    <a href="index.html" id="logo">
        <img src="images/newlogo.png" alt="blahblah">
    </a>
    </div>
    <div id="nav-bar">
        <ul class="nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="schedule.html">Schedule</a></li>
            <li><a href="register.html">Register</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="#slideshow">Contact</a></li>
         </ul>
    </div>
</header>

CSS

header {
    border-top: 12px solid #9e2630;
    width: 100%;
    background: #fff;
    left: 0;
    top: 0;
    z-index: 200;
    height: 115px;
    margin-bottom: 130px;
}

header #logo img {
    padding-top: 35px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

header ul {
    float: left;
    position:relative;
    left:50%;
    min-height: 60px;
    margin-top: 30px;
}

header ul li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position:relative;
    left:-50%;
    /*height: 45px;*/
}

header ul li a {
    font: normal normal normal 18px/20px 'Century Gothic', sans-serif;
    text-align: center;
    color: #9e2630;
    /*height: 43px;*/
}

header .nav li a:hover{
    background-color: #9e2630; color:#FFFFFF;
}

header ul li a.current{
    background-color: #9e2630; color:#FFFFFF;
}

徽标中的链接可以正常工作。联系人中的链接也可以正常工作，当我链接到页面上的元素时没有问题。其他四个链接不起作用。我也尝试将 href 设置为“http”地址，但这也不起作用。我已经在 DreamWeaver 的浏览器预览功能（IE 和 Chrome）以及远程服务器上运行了所有这些测试，结果没有差异。

我还注意到标题中的 z-index 设置为 200（这是我正在使用的示例代码），我知道这在元素的分层方式中发挥了作用。我试着摆弄它无济于事。大家觉得呢？

Edit1：这是我的文件结构的样子

file structure

这也是我一直在使用的模板

template

Edit2：好吧，伙计们，我发现问题是一个名为 jquery.singlePageNav.min.js 的 JS 文件

不幸的是，当我禁用此文件时，我失去了网页上漂亮的图像滑块，但链接又可以工作了，所以现在我必须解决这个问题：p

感谢大家的帮助！

Answer 1

从plugin's documentation，默认情况下它将覆盖所有链接，这显然不是你想要的。但是有一个filter 选项可以覆盖此行为：

'filter' - 默认情况下，插件将应用于容器内的所有链接，使用它来使用 jquery 的内置过滤方法过滤掉某些链接（例如 ':not(.external)'）

因此，我建议为您不想单页导航的所有链接添加一个类，然后使用 filter 选项进行初始化：

HTML

<header>
    <div class="banner"> <!-- contains main banner and logo -->
    <a href="index.html" id="logo">
        <img src="images/newlogo.png" alt="blahblah">
    </a>
    </div>
    <div id="nav-bar">
        <ul class="nav">
            <li><a href="index.html" class="external">Home</a></li>
            <li><a href="schedule.html" class="external">Schedule</a></li>
            <li><a href="register.html" class="external">Register</a></li>
            <li><a href="about.html" class="external">About</a></li>
            <li><a href="#slideshow">Contact</a></li>
         </ul>
    </div>
</header>

JavaScript

$(document).singlePageNav({filter: ':not(.external)'});

Answer 2

为您的页面提供正确的路径

        <li><a href="/pathtopage/index.html">Home</a></li>
        <li><a href="/pathtopage/schedule.html">Schedule</a></li>
        <li><a href="/pathtopage/register.html">Register</a></li>
        <li><a href="/pathtopage/about.html">About</a></li>
        <li><a href="#slideshow">Contact</a></li>

Answer 3

确保所有 .html 页面都位于正确的文件夹中。至于现在您正在链接到同一文件夹中的 html 页面，因此如果您没有它们，您将无法像这样打开它们。您必须从 index.html 导航到其他链接。生病解释：如果你有一个文件夹"sites" 并且你有所有的 .html 文档，它应该按照你的方式工作。但是，如果在您的文件夹 "sites" 中，您只有 index.html，而其他站点位于子文件夹 "sub-sites" 中，则您必须先导航到那里。正如在答案中发布的那样。 1