Question

我已经查看了其他类似的问题，似乎无法找到解决方案。

我的菜单上有.nav类，我相信数据目标指向正确的元素。

<body data-spy="scroll" data-target="#main-nav" data-offset="300">
<script type="text/javascript">
  $(document).ready(function() {
    $("#main-container").css("display", "none");
        $("#main-container").fadeIn(2000);
        $("a.transition").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("#main-container").fadeOut(1000, redirectPage);
    });
        function redirectPage() {
        window.location = linkLocation;
    }
  });
</script>
<div id="main-header">
  <h1>Springfield, NY</h1>
</div><!--Navbar-->
<nav id="main-nav" class="navbar navbar-inverse container nav">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display-->
    <div class="navbar-header">
      <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling-->
    <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li class="dropdown"><a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle">Classes<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="classes.html#sectYouth">Youth Class (5-10)</a></li>
            <li><a href="classes.html#sectKids">Older Kids Class (10+)</a></li>
            <li><a href="classes.html#sectAdults">Teens/Adults Class </a></li>
            <li><a href="classes.html#sectAiki">Aiki Jiu-Jitsu</a></li>
            <li><a href="classes.html#sectPrivate">Private Classes</a></li>
            <li><a href="classes.html#sectCorporate">Corporate Seminars</a></li>
            <li><a href="classes.html#sectDefense">Self Defense</a></li>
          </ul>
        </li>
        <li><a href="instructors.html">Instructors</a></li>
        <li><a href="sister.html">Sister Dojos</a></li>
        <li><a href="testimonial.html">Testimonials</a></li>
        <li><a href="gallerys.html">Gallerys</a></li>
        <li><a href="calendar.html">Calendar</a></li>
        <li class="dropdown"><a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle">Information<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="articles.html">Articles</a></li>
            <li><a href="studentinfo.html">Student Info</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.nav-collapse-->
  </div>
  <!-- END Navbar-->
</nav><!--End of Navbar-->

我会对任何建议感到高兴！

Answer 1

在我认为是您要更改导航栏中活动类的页面的classes.html页面中，导航栏中的链接不应该在链接中的哈希位置之前有页面。因此，在页面classes.html上，如果您的导航栏中的链接像<a href="classes.html#sectYouth"></a>那样编写，则scrollspy插件将无法识别它们，因此在滚动到＃位置时不会更改活动类。因此，只需在页面classes.html中删除页面名称，只需使用类似<a href="#sectYouth"></a>的＃位置，在所有其他页面上，您可以保持它与＃location之前的页面名称相同，以便它将指向正确的页面。另外，我知道你声明你的<nav>标签中有.nav类。这不是插件运行所必需的，通常用于内部导航部分。因此，您可以考虑从<nav>标记中删除此内容，并将.navbar和.navbar-inverse与容器类一起使用。它可能没有伤到任何东西，但它通常用于内部<ul class="nav navbar-nav">而不是外部导航栏本身。

Bootstrap scrollspy没有做任何事情

1 个答案: