Моя ссылка не открывает страницу, которую должна, но откроется в новой вкладке

Question

РЕДАКТИРОВАТЬ: отображаемый код здесь . Вы можете найти источник здесь .

Итак, у меня есть простая панель навигации:

        <nav>
            <ul>
                <li><a href="#">my works</a></li>
                <li><a href="about.html">about</a></li>
                <li><a href="index.html" style="font-size: 40px;">mnewhouse</a></li>
                <li><a href="#">services</a></li>
                <li><a href="#">contact</a></li>
            </ul>
        </nav>

По какой-то причине он не перенаправляет на мой about. html страницы, когда я нажимаю на ссылку "О нас". Странно то, что он открывает правильную страницу, когда я go, чтобы открыть ссылку в новой вкладке или новом окне. Есть идеи?

Answer 1

В вашем <script src="js/main.js"></script> есть часть кода

// Page Nav
var clickMenu = function() {
    var topVal = ( $(window).width() < 769 ) ? 0 : 58;

    $(window).resize(function(){
        topVal = ( $(window).width() < 769 ) ? 0 : 58;      
    });

    if ( $(this).attr('href') != "#") {
        $('#fh5co-main-nav a:not([class="external"]), #fh5co-offcanvas a:not([class="external"])').click(function(event){
            var section = $(this).data('nav-section');


            if ( $('div[data-section="' + section + '"]').length ) {

                $('html, body').animate({
                    scrollTop: $('div[data-section="' + section + '"]').offset().top - topVal
                }, 500);    

           }
           event.preventDefault();

        });
    }
};

Это означает, что для внешней ссылки добавьте class="external" в ваше меню <a>, иначе ваш внешний href будет прерван с event.preventDefault();. Попробуйте ввести код ниже.

    <nav id="fh5co-main-nav">
        <ul>
            <li><a href="#">my works</a></li>
            <li><a href="about.html" class="external">about</a></li>
            <li><a href="index.html" class="external" style="font-size: 40px;">mnewhouse</a></li>
            <li><a href="#">services</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </nav>

Answer 2

Атрибут HTML id определяет уникальный идентификатор для элемента HTML. Значение атрибута id должно быть уникальным в документе HTML.

Вы должны использовать класс для тега nav.

    <nav class="fh5co-main-nav">
            <ul>
                <li><a href="#">my works</a></li>
                <li><a href="about.html" target="_blank">about</a></li>
                <li><a href="index.html" style="font-size: 40px;">mnewhouse</a></li>
                <li><a href="#">services</a></li>
                <li><a href="#">contact</a></li>
            </ul>
        </nav>

И измените fh5co-main-nav на class .

    #fh5co-header .fh5co-main-nav {
    /*float: right;*/
    text-align: center
}
@media screen and (max-width: 768px) {
  #fh5co-header .fh5co-main-nav {
    display: none;
  }
}
#fh5co-header .fh5co-main-nav ul {
  padding: 0;
  margin: 4px 0 0 0;
}
#fh5co-header .fh5co-main-nav ul li {
  padding: 0;
  margin: 0;
  display: inline;
}
    #fh5co-header .fh5co-main-nav ul li a {
        font-family: "Roboto Slab", sans-serif;
        color: rgba(154,96,36, 0.8);
        text-decoration: none;
        margin-left: 90px;
        border-bottom: 2px solid transparent;
        font-size: 22px;
    }
        #fh5co-header .fh5co-main-nav ul li a:hover {
            text-decoration: none;
            color: #a58e2d;
            border-bottom: 2px solid #a58e2d;
        }

#fh5co-header.navbar-fixed-top {
  position: fixed !important;
  background: #fff;
  -webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
  top: 0;
  left: 0px;
}
#fh5co-header.navbar-fixed-top #fh5co-logo {
  float: left;
  line-height: 1.2;
}
#fh5co-header.navbar-fixed-top #fh5co-logo a {
  font-family: "Roboto Slab", sans-serif;
  font-size: 30px;
  color: #000;
}
#fh5co-header.navbar-fixed-top .fh5co-main-nav ul li a {
  font-family: "Roboto Slab", sans-serif;
  color: rgba(0, 0, 0, 0.8);
  text-decoration: none;
  margin-left: 90px;
  border-bottom: 2px solid transparent;
}
    #fh5co-header.navbar-fixed-top .fh5co-main-nav ul li a:hover {
        text-decoration: none;
        color: #f9ad81;
        border-bottom: 2px solid #f9ad81;
   }

Тестировал этот метод, все нормально.