我使用此模板为我的一个客户构建了一个网站-http：//www.templatemo.com/tm-395-- urbanic
该网站是http://www.southholstonriverlodge.com
他们最近希望我更换Nav Bar。以前，它仅链接到模板中正常工作的锚。我尝试将其更改为链接到其他页面Ex。
<li class="active"><a href="index.html" title="Home">HOME</a></li>
他们不再工作。转到锚的NAV链接仍然有效，并且与外部页面的链接工作。我可以右键单击并打开新标签中的页面，但是直接单击无济于事。我已经尝试了很多解决此问题的方法，只是无法到达任何地方。想法？我什至不知道在哪里看。我对Bootstrap非常陌生，并且正在努力实施下拉列表，认为这是问题，将其删除了。我将包括一些代码片段，但我什至不确定从哪里开始。
.nav > li > a {
padding: 10px 10px;
}
.nav > li > a:hover,
.nav > li > a:focus {
background-color: #648c33;
color:#fff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: #648c33;
color:#fff;
}
.nav > li > a {
color: #929292;
}
.navbar-default {
background-color:#fff;
border:none;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background-color: #005200;
color: #fff;
}
.navbar {
margin-bottom: 0px;
}<!DOCTYPE html>
<html lang="en"><!-- InstanceBegin template="/Templates/SHRL Template.dwt" codeOutsideHTMLIsLocked="false" --><head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>South Holston River Lodge | World Class Fishing | Luxury Lodging</title>
<!-- InstanceEndEditable -->
<meta name="keywords" content="south holston river lodge, lodge, soho, tennessee fly fishing, tennessee lodge, south holston, fly fishing, float, wade, guide, all inclusive, lodging, vacation, trips, cabins, home, bristol, tennessee, tn, destination, eastern tennessee" />
<meta name="description" content="South Holston River Lodge is located in Eastern Tennessee. It is a destination fly fishing lodge with excellent year round fishing." />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-51645845-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-51645845-1');
</script>
<!--
Urbanic Template
http://www.templatemo.com/tm-395-urbanic
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link rel="shortcut icon" href="PUT YOUR FAVICON HERE">-->
<link rel="shortcut icon" href="images/favicon.ico?v1.ico">
<!-- Google Web Font Embed -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="js/colorbox/colorbox.css" rel="stylesheet" type='text/css'>
<link href="css/templatemo_style.css" rel="stylesheet" type='text/css'>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<!-- InstanceParam name="OptionalRegion1" type="boolean" value="true" -->
</head>
<body>
<div class="templatemo-top-bar" id="templatemo-top">
<div class="container">
<subheader>
<div id="phone" class="pull-left">
<img src="images/phone.png" alt="phone">
877.767.7875
</div>
<div id="email" class="pull-right">
<img src="images/email.png" alt="email" title="Email Icon"> bookings@southholstonriverlodge.com
</div>
</subheader>
</div>
</div>
<div class="templatemo-top-menu">
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand"><img src="images/sohorl.png" alt="SHRL Logo" width="200" title="South Holston River Lodge" /></a>
</div>
<div class="navbar-collapse collapse" id="templatemo-nav-bar">
<ul class="nav navbar-nav navbar-right" style="margin-top: 40px;">
<li class="active"><a href="index.html" title="Home">HOME</a></li>
<li><a href="about.html">ABOUT US</a></li>
<li><a href="#templatemo-blog" title="Services">SERVICES</a></li>
<li><a rel="nofollow" href="https://www.flickr.com/photos/138605916@N04/albums" class="external-link" title="Photo Gallery" target="_blank">GALLERY</a></li>
<li><a rel="nofollow" href="https://southholstonriverlodge.wordpress.com/" class="external-link" title="Fishing Report" target="_blank">FISHING REPORT</a></li>
<li><a href="#templatemo-contact" title="Contact">CONTACT</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div><!--/.navbar -->
</div> <!-- /container -->
</div>我在您的模板中注意到id="templatemo-nav-bar"，当我搜索网络时，我发现有人建议将class="external"添加到链接中：
<a href="index.html" title="Home" class="external">HOME</a>
我无法自己测试，因为您的示例可能缺少一些JavaScript。希望它有帮助：）
编辑
查看模板脚本，实际上可能是class="external-link"：
<a href="index.html" title="Home" class="external-link">HOME</a>
这应该解开click事件处理程序，允许该链接按预期工作。
查看您链接的模板，它看起来像单击链接在页面上进行平滑滚动，而不是使用浏览器的本机锚链接链接功能。这意味着有一些JavaScript处理此操作并覆盖浏览器的默认行为。在模板的JavaScript中，我们看到了此部分：
// scroll to specific id when click on menu
$('.templatemo-top-menu .navbar-nav a').click(function(e){
e.preventDefault();
var linkId = $(this).attr('href');
scrollTo(linkId);
if($('.navbar-toggle').is(":visible") == true){
$('.navbar-collapse').collapse('toggle');
}
$(this).blur();
return false;
});
它使用e.preventDefault()覆盖浏览器的默认链接行为，然后使用scrollTo()移动页面。不幸的是，我认为这意味着您几乎坚持这种行为，除非您可以修改JavaScript或广泛修改模板。