Question

我对网络编程有点新意见并且已经看了很多，试图自己解决这个问题，但对于我的生活我无法理解，我非常感谢任何和所有的帮助。

我基本上制作了一个导航栏，我尝试将其链接到我的其他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设置为＆＃34; http＆＃34;地址，但那也没有用。我在DreamWeaver的浏览器预览功能（IE和Chrome）以及远程服务器上运行所有这些测试，结果没有区别。

我还注意到标题中的z-index设置为200（这是我正在使用的示例代码），我理解它在元素的分层方式中发挥作用。我试图摆弄它无济于事。你们觉得怎么样？

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

file structure

此处还有我一直在使用的模板

template

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

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

感谢大家的帮助！

Answer 1

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

＆＃39;过滤器＆＃39; - 默认情况下，插件将应用于容器中的所有链接，使用此过滤器使用jquery内置的过滤方法过滤掉某些链接（例如＆＃39;：not（.external）＆＃39;）

因此，我建议您为所有不希望单页导航的链接添加课程，然后使用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

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

3 个答案: