[英]My link is not opening the page it should but will in a new tab
所以我有一个简单的导航栏:
<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 页面。 奇怪的是,当我在新选项卡或新 window 中打开链接时,它确实打开了正确的页面。 有任何想法吗?
在您的<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>
HTML id 属性指定 HTML 元素的唯一 id。 id 属性的值在 HTML 文档中必须是唯一的。
您必须使用 class 作为导航标签。
<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;
}
我测试了这个方法,一切都很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.