為什么我的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：這是我的文件結構

文件結構

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

模板

Edit2：好的，我發現問題是一個名為jquery.singlePageNav.min.js的JS文件。

不幸的是，當我禁用該文件時，我失去了網頁上漂亮的圖像滑塊，但是鏈接再次起作用，所以現在我必須修復：p

感謝大家的幫助！

Answer 1

從插件的文檔開始 ，默認情況下它將覆蓋所有鏈接，這顯然不是您想要的。 但是，有一個filter選項可以覆蓋此行為：

'filter'-默認情況下，該插件將應用於容器內的所有鏈接，使用此插件可通過jquery的內置filter方法（例如'：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頁面，因此，如果您在其中沒有html頁面，則無法像這樣打開它們。 您必須從index.html導航到其他鏈接。 病態的解釋：如果您有一個文件夾"sites"並且所有.html文件都在該文件夾中，則它應該可以像以前那樣工作。 但是，如果在文件夾"sites"只有index.html，而其他站點在子文件夾"sub-sites" ，則必須先導航至該文件夾。 如答案中所述。 1