Question

我有一个使用Bootstrap创建的页面网站。在此页面上标题链接如下：

<header id="section_header" class="navbar-fixed-top main-nav" role="banner">
    <div class="container">
        <!-- <div class="row"> -->
             <div class="navbar-header ">
                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <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="#">
                        <img src="" alt="biZkvitki.bg">
                    </a>
             </div><!--Navbar header End-->
                <nav class="collapse navbar-collapse navigation" id="bs-example-navbar-collapse-1" role="navigation">
                    <ul class="nav navbar-nav navbar-right ">
                        <li class="active"> <a href="#slider_part">Home</a></li>
                        <li><a href="#portfolio"  >Portfolio</a> </li>
                        <li><a href="#about" >About</a> </li>
                        <li><a href="#team" >Team</a> </li>
                        <li><a href="#blog" >Blog</a> </li>
                        <li><a href="#contact" >Contacts</a> </li>
                    </ul>
                 </nav>
            </div><!-- /.container-fluid -->
 </header>

在该页面上一切正常。我尝试的是在每个内部页面中重新创建此标题，但是当我尝试创建这样的链接时，它们不起作用。点击它们什么都没发生。这个想法是当用户在某个内部页面上并点击About例如加载索引页面部分时..我在这里缺少什么？

<ul class="nav navbar-nav navbar-right ">
    <li class="active"> <a href="../index.php#slider_part">Home</a></li>
    <li><a href="../index.php#portfolio"  >Portfolio</a> </li>
    <li><a href="../index.php#about" >About</a> </li>
    <li><a href="../index.php#team" >Team</a> </li>
    <li><a href="../index.php#blog" >Blog</a> </li>
    <li><a href="../index.php#contact" >Contacts</a> </li>
</ul>

更新：我相信这是导航栏的.js

jQuery(function($) {
"use strict";

 $('.navigation').singlePageNav({
    currentClass: 'active',
    changeHash: true,
    scrollSpeed: 750,
    offset: 0,
    filter: ':not(.external)',
    easing: 'swing',

});

$.noConflict();
 $('.nav a').on('click', function(){ 
    if($('.navbar-toggle').css('display') !='none'){
        $(".navbar-toggle").trigger( "click" );
    }
});




// accordian
$('.accordion-toggle').on('click', function(){
  $(this).closest('.panel-group').children().each(function(){
  $(this).find('>.panel-heading').removeClass('active');
 });

$(this).closest('.panel-heading').toggleClass('active');
});

Answer 1

哦是的，我知道js脚本会成功！解决方案应该是只在index.php上调用脚本，因为在另一个页面上脚本会阻止正常的链接行为。如果您不想在其他页面上删除脚本，则需要检测索引页面，如：

<body id="home-page">

在你的剧本上：

 $('#home-page .navigation')

Answer 2

如果您在本地计算机上，则需要添加包含所有站点文件的站点文件夹的名称。例如../"name of site"/index.php#portfolio如果您的网站是实时的，请在索引之前添加整个网站地址，例如http://"name of site"/index.php#portfolio

Answer 3

您正在使用锚链接，因此您只需在同一页面上下移动。

确保您正确设置了自己的ID。

<div id="portfolio">Portfolio</div>

Answer 4

页面上的链接是本地的，这就是他们工作正常的原因：

<ul class="nav navbar-nav navbar-right ">
  ...
  <li><a href="#portfolio">Portfolio</a> </li>
  <li><a href="#about"    >About</a>     </li>

根据单页导航，其他页面上的链接不是本地（不是本地书签），因为它们以相对路径开头：

<li><a href="../index.php#portfolio">Portfolio</a> </li>
<li><a href="../index.php#about"    >About</a>     </li>

请注意，当您调用＆＃34; singlePageNav＆＃34;：

时，会有一个过滤器

 $('.navigation').singlePageNav({
    currentClass: 'active',
    changeHash  : true,
    scrollSpeed : 750,
    offset      : 0,
    filter      : ':not(.external)',
    easing      : 'swing',

});

如果将该过滤器类添加到锚点，它们应该可以正常工作：

<li><a class="external" href="../index.php#portfolio">Portfolio</a> </li>
<li><a class="external" href="../index.php#about"    >About</a>     </li>

Answer 5

这是我在使用bootstrap时经常遇到的问题。您可能正在使用ScrollTo.js，因为您很可能只是将整个页面复制/粘贴到新页面上。所以（如果你真的不需要它）只需从头部删除，或在结束体标记之前的底部删除。

导航栏中的链接不起作用

5 个答案: