我的链接没有打开它应该打开的页面，但会在一个新标签中

Question

编辑：呈现的代码是here。 可以找到源here。

所以我有一个简单的导航栏：

        <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 链接时，它没有重定向到我的 about.html 页面。奇怪的是，当我在新选项卡或新窗口中打开链接时，它确实打开了正确的页面。有什么想法吗？

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。 id 属性的值在 HTML 文档中必须是唯一的。

您必须使用类作为导航标签。

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

我测试了这个方法，一切都很好。