Question

我使用此模板-http://www.templatemo.com/tm-395-urbanic

为我的一个客户建立了一个网站

网站为http://www.southholstonriverlodge.com

他们最近要我更换导航栏。以前仅将其链接到模板中的锚，效果很好。我尝试将其更改为链接到其他页面。

<li class="active"><a href="index.html" title="Home">HOME</a></li>

，它们不再起作用。指向锚点的导航链接仍然有效，而指向外部页面的链接也有效。我可以右键单击并在新选项卡中打开页面，但是直接单击不会执行任何操作。我已经竭尽全力解决了这个问题，却无所适从。有想法吗？我当时甚至不知道在哪里看。我对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>

Answer 1

在查看链接的模板时，单击链接似乎可以平滑地向下滚动页面，而不是使用浏览器的本机锚链接功能。这意味着有一些javascript处理此问题并覆盖了浏览器的默认行为。在模板的JavaScript here中，我们看到了以下部分：

x[out]
# [1] NA    "foo" "foo" "foo" "foo" NA    NA    "baz" "baz" "baz" "baz" "baz" "bar" "bar" "bar" "bar" "bar" "bar" NA    "qux"

使用// 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()来移动页面。不幸的是，我认为这意味着除非您可以修改javascript或广泛地修改模板，否则您就很难摆脱这种行为。

Answer 2

我注意到您模板中的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事件处理程序，以使链接按预期工作。

导航栏链接到内部html页面不起作用

2 个答案: