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

【问题标题】：Nav bar links to internal html pages not working导航栏链接到内部 html 页面不起作用
【发布时间】：2019-02-15 23:05:19
【问题描述】：

我用这个模板为我的一个客户建立了一个网站 - http://www.templatemo.com/tm-395-urbanic

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

他们最近希望我更改导航栏。它以前只链接到模板中运行良好的锚点。我尝试将其更改为链接到其他页面。

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

他们不再工作。指向锚点的导航链接仍然有效，而指向外部页面的链接仍然有效。我可以右键单击并在新选项卡中打开页面，但直接单击什么也不做。我已经尝试了很多来解决这个问题，但无法到达任何地方。想法？我什至不知道在哪里看。我对引导程序相当陌生，我正在努力实施下拉菜单，认为这是问题所在，将其删除。我将包含一些代码 sn-ps 但我什至不确定从哪里开始。

.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>

【问题讨论】：

会不会是 javascript 阻止了链接被点击？我觉得导航是为了链接到要滚动到的名称/ID 锚点？页面上加载了什么 javascript？

标签： html twitter-bootstrap navigation navbar

【解决方案1】：

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

【讨论】：

是的！ sn3p 成功了，谢谢！我知道这很简单，我只是盯着那个部分太久了，看不到哈哈。谢谢！

【解决方案2】：

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

// 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 或广泛修改模板，否则您几乎会被这种行为所困扰。

【讨论】：