Question

我无法弄清楚我的index.html或main.css有什么问题。我使用自定义样式表的Bootstrap为我的布局添加了一些新东西。

无论如何，我创建了一个单页网站，所有菜单项都在正确的部分，但只有一个链接进入另一个网站，此链接不起作用。如果我右键单击它并在新选项卡中单击打开它正在运行。但只是点击菜单项是不可能的。

这是我的导航HTML：

<header id="header" role="banner">
  <div class="container">
    <div id="navbar" class="navbar navbar-default">
      <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 class="navbar-brand" href="index.html"></a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#main-slider"><i class="icon-home"></i></a>
          </li>
          <li><a href="#services">Services</a>
          </li>
          <li><a href="#about-us">About Us</a>
          </li>
          <li><a href="#gallery">Gallery</a>
          </li>
          <li><a href="#brands">Brands</a>
          </li>
          <li><a href="#hours">Hours</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
          <li><a href="http://stores.ebay.com/scactionsportsLLC">Store</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>

这是我的导航CSS：

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 99999;
}
.navbar-default {
  background: #fff;
  border-radius: 0 0 5px 5px;
  border: 0;
  padding: 0;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
  overflow: hidden;
}
.navbar-default .first a {
  border-radius: 0 0 0 5px;
}
.navbar-default .navbar-brand {
  margin-right: 50px;
  margin-left: 20px;
  width: 200px;
  height: 78px;
  background: url(../images/logo.png) no-repeat 0 50%;
}
.navbar-default .navbar-nav > li {
  margin-left: 1px;
}
.navbar-default .navbar-nav > li > a {
  padding: 30px 25px;
  font-size: 16px;
  line-height: 18px;
  color: #999;
}
.navbar-default .navbar-nav > li > a > i {
  display: inline-block;
}
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active:focus > a,
.navbar-default .navbar-nav > li.active:hover > a,
.navbar-default .navbar-nav > li:hover > a,
.navbar-default .navbar-nav > li:focus > a,
.navbar-default .navbar-nav > li.active > a:focus,
.navbar-default .navbar-nav > li.active:focus > a:focus,
.navbar-default .navbar-nav > li.active:hover > a:focus,
.navbar-default .navbar-nav > li:hover > a:focus,
.navbar-default .navbar-nav > li:focus > a:focus {
  background-color: #f57e20;
  color: #fff;
}

这是一个小提琴： https://jsfiddle.net/jh6ufp75/3/

有人能帮我解决这个问题吗？

非常感谢！

亲切的问候。

Answer 1

将 target =＆＃34; _blank＆＃34 ;; 添加到您的商店菜单链接。它工作正常。代码：

<header id="header" role="banner">
            <div class="container">
                <div id="navbar" class="navbar navbar-default">
                    <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 class="navbar-brand" href="index.html"></a>
                    </div>
                    <div class="collapse navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#main-slider"><i class="icon-home"></i></a></li>
                            <li><a href="#services">Services</a></li>
                            <li><a href="#about-us">About Us</a></li>
                            <li><a href="#gallery">Gallery</a></li>
                            <li><a href="#brands">Brands</a></li>
                            <li><a href="#hours">Hours</a></li>
                            <li><a href="#contact">Contact</a></li>
                            <li><a href="http://stores.ebay.com/scactionsportsLLC" target="_blank">Store</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>

Answer 2

模板的ul和li类存在问题。如果你删除li标签它工作正常，试一试

<div><a href="http://stores.ebay.com/scactionsportsLLC">Store</a></div>

问题是您必须重新设置div标签，以便在其他菜单元素中查看相同内容。

我走得更远......

问题的根源在第20行的main.js中：

//smooth scroll
$('.navbar-nav > li').click(function(event) {
    event.preventDefault();
    var target = $(this).find('>a').prop('hash');
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 500);
});

所以......这个脚本会阻止导航栏中的li标签进行默认点击操作，并转到html文件中的锚点。因为您链接到外部链接，所以菜单项没有“顶级”的优点，如果您检查控制台日志，则会收到此错误：

main.js：25未捕获的TypeError：无法读取未定义的属性“top”

您可以简单地使用div标签而不是li，并将其设置为菜单项。

菜单项无法点击

2 个答案: