无法使 NAV 链接正常工作，html 代码是正确的

Question

我正在构建一个单页模板。我决定添加第二个页面来反映主页。我不得不更改导航栏链接代码以指向主要页面的各个部分（即：而不只是#about，我将其改为index.html#about）。但是这些链接不起作用。如果我在 Chrome 中使用“检查”并 ctrl+单击代码中的链接，它将起作用，所以我认为 CSS 中的某些内容阻止了这部分实际单击链接。

有问题的页面是www.homexphoto.ca/pricing.html

导航 HTML 代码

<div class="sidebarnav hidden-sm hidden-xs">
            <div class="logo">
                <a href="index.html"><img id="topleftlogo" src="images/transparentlogowhite.png"> Home Expressions <br><em>Photography</em></a>
            </div>
            <nav>
                <ul>
                    <li>
                        <a href="index.html">
                            <span class="rect"></span>
                            <span class="circle"></span>                          
                            Home
                        </a>
                    </li>
                    <li>
                        <a href="index.html#services">
                            <span class="rect"></span>
                            <span class="circle"></span>
                            Services
                        </a>
                    </li>
                    <li>
                        <a href="index.html#pricing">
                            <span class="rect"></span>
                            <span class="circle"></span>
                            Pricing
                        </a>
                    </li>
                    <li>
                        <a href="index.html#portfolio">
                            <span class="rect"></span>
                            <span class="circle"></span>
                            Portfolio
                        </a>
                    </li>
                    <li>
                        <a href="index.html#about">
                            <span class="rect"></span>
                            <span class="circle"></span>
                            About
                        </a>
                    </li>
                    <li>
                        <a href="index.html#contact">
                            <span class="rect"></span>
                            <span class="circle"></span>
                            Contact Us
                        </a>
                    </li>
                </ul>
            </nav>

导航 CSS

/* Sidebar navigation secondary pages */
.sidebarnav {
  width: 22%;
  float: left;
  height: 100%;
  position: fixed;
  background-color: rgba(12,12,12,0.9);
  z-index: 10;
}

.sidebarnav .logo {
  position: absolute;
  width: 100%;
  height: 140px;
  line-height: 26px;
  background-color: #585858;
  padding: 20px;
  text-align: center;
}

.sidebarnav .logo a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
  font-weight: 525;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  height: 100px;
  width: 100%;
  display: inline-block;
  border: 1px solid rgba(250,250,250,0.5);
  border-radius: 15px;
  padding: 9px 2px 0px 2px;
  
}

.sidebarnav .logo em {
  font-style: normal;
  font-weight: 300;
   
}

.sidebarnav nav {
  position: relative;
  top: 60%;
  left: 60%;
  -webkit-transform: translateX(-60%) translateY(-60%);
  -moz-transform: translateX(-60%) translateY(-60%);
  -ms-transform: translateX(-60%) translateY(-60%);
  -o-transform: translateX(-60%) translateY(-60%);
  transform: translateX(-60%) translateY(-60%);
}

.sidebarnav ul {
  margin-left: 45px;
  list-style: none;
  padding: 0;
}
.sidebarnav li{
  padding: 10px 0;
}
.sidebarnav span{
  display: inline-block;
  position: relative;
}
.sidebarnav nav a{
  display: inline-block;
  color: #fff;
  margin-top: 5px;
  text-decoration: none!important;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: capitalize;
}

.sidebarnav nav a:focus {
  color: #fff;
}
.sidebarnav nav a:hover, nav .active-section {
  color: #fff;
}
.sidebarnav nav a:hover span, nav .active-section span{
  background-color: #ddd;
}
.sidebarnav nav .active-section .rect{
  width: 30px;
}
.sidebarnav nav .active-section .circle{
  background-color: #fff;
}

.sidebarnav .social-icons {
  position: absolute;
  width: 100%;  
  bottom: 10px;
  padding: 0;
  margin: 0;
  text-align: center;
}

.sidebarnav .social-icons li {
  display: inline-block;
  margin-right: 15px;
  margin-top: 0px;
  margin-bottom: 0px;
}
.sidebarnav .social-icons li:last-child {
  margin-right: 0px;
}

.sidebarnav .social-icons li a {
  font-size: 18px;
  color: #fff;
  transition: all 0.5s;
}

.sidebarnav .social-icons li a:hover {
  color: #45489a;
}

我在这里遗漏了一些简单的东西吗？我使用的模板也有 Javascript，我尽量不要碰它，因为我还没有技能。我希望这不会以某种方式阻止它。

干杯

编辑 - 如果我右键单击侧边栏导航链接并“在新选项卡中打开”，它们就会起作用！但是单击似乎禁用了？

Answer 1

当我右键单击并选择“在新窗口中打开链接”时，它按预期工作，新页面打开，所以链接是正确的。

我怀疑有一些 javascript 包含链接的“preventDefault()”，以便执行滚动动画或类似的东西。

事实上，这似乎是单页浏览器的模板 - 链接在 index.html 页面上确实有效（使用动画滚动）...

所以，看看 JS 文件并搜索“preventDefault”...

---

cmets后的加法：这段代码前段时间帮我解决了一个类似的问题：

jQuery(function ($) {
    $(document).ready(function() {
        if(window.location.hash) {
            var hash = window.location.hash;
            $( 'a[href=' + hash + ']' ).click();
        }
    });
});