问

Bootstrap navbar Active State无法正常工作

曦雯天使发布于 2023-01-06 19:00

我有bootstrap v3.

当我按下菜单项时,我使用class="active"on my navbar并且它不会切换.我知道如何使用jQuery并构建一个单击函数,但我认为这个功能应该包含在bootstrap中？那么也许这是一个JavaScript问题？

这是我的头文件,包含我的js/css/bootstrap文件:

这是我的navbar代码:

我这样做了吗？

(在一个不相关的注释,但可能相关？当菜单移动时,我点击菜单按钮,它崩溃.再次推它不会崩溃它.所以这个问题,与另一个,都表示错误的JavaScript设置也许？)

7 个回答

如果您不使用锚链接,可以使用以下内容:

$(document).ready(function () {
    $.each($('#navbar').find('li'), function() {
        $(this).toggleClass('active',
            '/' + $(this).find('a').attr('href') == window.location.pathname);
    });
});

2023-01-06 19:02 回答

vuvhvuvh

这是我切换活动页面的解决方案

$(document).ready(function() {
  $('li.active').removeClass('active');
  $('a[href="' + location.pathname + '"]').closest('li').addClass('active'); 
});

2023-01-06 19:02 回答

用户gokk5efqd3

通过Bootstrap 4，您可以使用以下命令：

$(document).ready(function() {
    $(document).on('click', '.nav-item a', function (e) {
        $(this).parent().addClass('active').siblings().removeClass('active');
    });
});

2023-01-06 19:02 回答

kafka

这对我来说是完美的,因为"window.location.pathname"还包含真实页面名称之前的数据,例如directory/page.php.因此,如果网址包含此链接,则实际的导航栏链接将仅设置为活动状态.

$(document).ready(function() {
    // -----------------------------------------------------------------------
    $.each($('#navbar').find('li'), function() {
        $(this).toggleClass('active', 
            window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
    }); 
    // -----------------------------------------------------------------------
});

2023-01-06 19:02 回答

记忆簿

您已经包含了缩小的Bootstrap js文件和折叠/转换插件,而文档说明:

bootstrap.js和bootstrap.min.js都包含单个文件中的所有插件.
仅包括一个.

和

对于简单的过渡效果,请将transition.js包含在其他JS文件旁边.如果你正在使用编译的(或缩小的)bootstrap.js,则不需要包含它 - 它已经存在了.

这对于最小化问题很可能是你的问题.

对于活动类,您必须自己管理它,但它只是一两行.

Bootstrap 3:
```
$(".nav a").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).parent().addClass("active");
});
```
Bootply:http://www.bootply.com/IsRfOyf0f9

Bootstrap 4:
```
$(".nav .nav-link").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).addClass("active");
});
```
2023-01-06 19:02 回答

我们一起美容瘦身
使用版本3.3.4的bootstrap,在长html页面上,您可以参考pg的各个部分.通过class或id来管理带有spy-scroll和body元素的活动导航栏链接:
```
  <body data-spy="scroll" data-target="spy-scroll-id">
```
数据目标将是一个div,其id ="spy-scroll-id"
```
    <div id="spy-scroll-id" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#topContainer">Home</a></li>
        <li><a href="#details">About</a></li>
        <li><a href="#carousel-container">SlideShow</a></li>
      </ul>
    </div>
```
这应该通过点击而不需要任何javascript函数来激活链接,并且当你滚动浏览页面的相应链接部分时js onclick()将不会自动激活每个链接.
2023-01-06 19:03 回答

您只需将data-toggle ="tab"添加到bootstrap导航栏中的链接,如下所示:

<ul class="nav navbar-nav">
  <li class="active"><a data-toggle="tab" href="#">Home</a></li>
  <li><a data-toggle="tab" href="#">Test</a></li>
  <li><a data-toggle="tab" href="#">Test2</a></li>
</ul>

2023-01-06 19:03 回答

关注丑开

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签