Navbar链接到其他页面不起作用

时间:2016-04-03 17:45:36

标签: html css twitter-bootstrap

我正在尝试链接"摄影"我的导航栏中的部分到页面photos.html。但是由于某些原因链接不起作用,但当我在URL中输入页面时,会出现正确的页面。我已经尝试了导航栏列表外部的链接,但由于某种原因,当我将其链接到导航栏中的某个选项时,它无法正常工作。

    <nav class="navbar navbar-default navbar-fixed-top navbar-centered navbar-custom">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href=#title><img src="rectangle_logo(1).png" height="25px"></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-center">
                <li> <a href=#title>Home </a></li>
                <li> <a href=#about> About</a></li>
                <li> <a href=#Projects> Projects </a></li>
                <li> <a href="photos.html">Photography </a><li> //here is where I try and link to the next page
                <li><a href=#Contact> Contact </a></li>
            </ul>
        </div>
    </div>
</nav>

Home PagePage that need to Redirect user to

3 个答案:

答案 0 :(得分:3)

您的JavaScript函数阻止链接正常工作:

 $(".navbar a,.title a, footer a[href='#myPage']").on('click', function(event) {

      // Prevent default anchor click behavior
      event.preventDefault();

}

您可以在链接上使用您的函数应该使用的类:

 <ul class="nav navbar-nav navbar-center">
     <li> <a href="#title" class="prevent">Home </a></li>
     <li> <a href="#about" class="prevent"> About</a></li>
     <li> <a href="#Projects" class="prevent"> Projects </a></li>
     <li> <a href="photos.html">Photography </a></li> //here is where I try and link to the next page
     <li> <a href="#Contact" class="prevent"> Contact </a></li>
</ul>

然后将您的JavaScript更改为新类:

 $(".navbar .prevent,.title a, footer a[href='#myPage']").on('click', function(event) {

      // Prevent default anchor click behavior
      event.preventDefault();

}

答案 1 :(得分:1)

有一个错字

<li> <a href="photos.html">Photography </a><li>

必须将<li>标记关闭为</li>

<li> <a href="photos.html">Photography </a></li>

答案 2 :(得分:0)

代码中有错误

Ordering[Int]