Блог

Я немного новичок в веб-программировании и искал повсюду, пытаясь решить эту проблему самостоятельно, но, хоть убей, я не могу в этом разобраться, я очень ценю любую помощь.

Я в основном создаю панель навигации и пытаюсь связать ее с другими моими 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-индекс в заголовке установлен на 200 (это пример кода, с которым я работаю), который, как я понимаю, играет роль в том, как элементы слоистые. Я пытался возиться с этим безрезультатно. Что вы, ребята, думаете?

Правка1: вот как выглядит моя файловая структура

структура файла

Также вот шаблон, который я использовал

шаблон

Редактирование 2: Хорошо, ребята, я обнаружил, что проблема заключалась в файле JS с именем jquery.singlePageNav.min.js

к сожалению, когда я отключаю этот файл, я теряю красивый слайдер изображения, который был у меня на веб-странице, но ссылки снова работают, так что теперь я должен это исправить: p

Всем спасибо за помощь!

Из документации плагина по умолчанию он переопределяет все ссылки, что явно не то, что вы хотите здесь. Однако есть 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)'});
  

Укажите правильный путь к вашим страницам

         <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>
  

убедитесь, что все ваши HTML-страницы находятся в правильной папке. На данный момент вы ссылаетесь на html-страницы в той же папке, поэтому, если у вас их там нет, вы не сможете открыть их таким образом. вы должны перейти к другим ссылкам из своего index.html . Я объясню: если у вас есть папка "sites" , в которой хранятся все ваши документы .html, она должна работать так, как вы это делали. НО если в вашей папке "sites" у вас есть только ваши index.html а другие сайты находятся во вложенной "sub-sites" папке, по которой вам сначала нужно будет перейти. Как указано в ответе № 1