Bootstrap CSS 主动导航

【问题标题】：Bootstrap CSS Active NavigationBootstrap CSS 主动导航
【发布时间】：2012-03-07 06:34:54
【问题描述】：

在 Bootstrap 网站上，子导航与部分匹配，并在您或滚动到部分时更改背景颜色。我想创建自己的菜单，没有所有背景颜色和所有内容，但是，我将 CSS 更改为相似，但是当我向下滚动或单击菜单项时，活动类不会切换。不知道我做错了什么。

HTML：

<ul class="menu">
    <li><a href="#" aria-current="page">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

CSS：

.menu {
  list-style:none;
}
.menu > li {
  float: left;
}
.menu > li > a {
  color: #555;
  float: none;
  padding: 10px 16px 11px;
  display: block;
}
.menu > li > a:hover {
  color: #F95700;
}
.menu a[aria-current="page"],
.menu a[aria-current="page"]:hover {
  color:#F95700;
}

我检查了文件； jQuery、bootstrap.js 和 bootstrap.css 都正确链接。我是否必须添加一些额外的 jQuery 或者我是否缺少一些 CSS 才能像他们网站上的 subnav 菜单一样进行活动切换？

【问题讨论】：

    标签： jquery html css twitter-bootstrap


    【解决方案1】： 
    <ul class="main-menu">
    <li><a href="~/Cases/Index"><i class="fa fa-font fa-fw"></i><span class="text">Audit Case</span></a></li>
    <li><a href="~/Cases/Auditplan"><i class="fa fa-font fa-fw"></i><span class="text">Audit Plan</span></a></li>
    <li><a href="~/Cases/Auditreport"><i class="fa fa-font fa-fw"></i><span class="text">Audit Report</span></a></li>
    <li><a href="~/Cases/Company"><i class="fa fa-font fa-fw"></i><span class="text">Company Details</span></a></li>
</ul>

<script>
$(function(){
  $('.main-menu li > a[href="' + document.location.pathname + '"]').parent().addClass('active').siblings().removeClass('active');
})
</script>

    【讨论】：

      【解决方案2】：

      经过测试，效果很好。

          $('.navbar li').click(function(e) {
        $('.navbar li.active').removeClass('active');
        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }

    });

  <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            . . . 
  </ul>

      【讨论】：

        【解决方案3】：

        我建议这个代码：

         <script>
      var curentFile = window.location.pathname.split("/").pop();
      if (curentFile == "") curentFile = "Default.aspx";
      $('ul.nav > li > a[href="' + curentFile + '"]').parent().addClass('active');
 </script>

        它的工作就像一个魅力。

        【讨论】：

          【解决方案4】：

          我尝试了上面的一些热门答案，它适用于“.active”类，但链接不能正常工作，它仍然停留在当前页面上。然后我尝试了这个：

          var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');

          我在这里找到它：Twitter Bootstrap add active class to li

          【讨论】：

          • 链接工作正常:) 谢谢
          【解决方案5】：

          这已经很老了，而且答案很集中，但我选择了最佳答案并使它变得更好。最佳答案仅在页面上有一个时才有效。这将其范围限定为从 sibling 元素中删除活动并将其添加到您单击的元素中。

          我还添加了 nav-toggle 类，这样它就不会干扰已经附加了 bootstrap js 的东西。

          $('.nav.nav-toggle li').click(function(e) {
  var $this = $(this);
  $this.siblings().removeClass('active');
  if (!$this.hasClass('active')) {
      $this.addClass('active');
  }
  e.preventDefault();
});

          【讨论】：

            【解决方案6】：

            这就是我最终的结果，因为你也必须清除其他人。

            $('.navbar li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});

            【讨论】：

            • 能否请您发布整个上下文？哪个是导航栏，哪个是李？这个 javascript 块放在哪里？抱歉，我真的很难理解 javascripts
            • 如果默认导航栏将Home 设置为active，当单击链接并加载新页面时，您将如何保持新的li 处于活动状态，即没有@ 987654325@.
            • @David 我的问题是这个。我看到active 类在单击后被应用于lis，但链接没有改变。但是，如果我在单击时删除e.preventDefault();，则将active 应用于li，但随后active 类将移动到默认值，在这种情况下，`
            • 主页
              • 。任何想法？谢谢。
          • ¡伙计！，你太棒了：D
            • 【解决方案7】：

            任何使用 jsp 遇到问题的人，请注意你的包。

            document.location.pathname 给了我：/packagename/index.jsp

            但我在导航栏中的 href 只调用了 index.jsp

            所以要编辑消费者的答案：

            $(document).ready(function() {
   var string = document.location.pathname.replace('/Package Name/','');
   $('ul.nav > li > a[href="' + string + '"]').parent().addClass('active');
} );

            【讨论】：

            • 手提包。我的只是用于顶级链接，从正在运行的项目中提取代码。可能会更好 $('ul.nav > li > a[href="' + document.location + '"]').parent().addClass('active');
            【解决方案8】：

            我使用 2 条 1 线，具体取决于我的导航结构

            只要确保您的所有链接都没有活动课程可以开始。

            实际链接

            如果您的导航链接位于单独的 HTML 文件中（例如 express.js 中具有菜单的布局模板），您可以这样做：

            $('ul.nav > li > a[href="' + document.location.pathname + '"]').parent().addClass('active');

            哈希链接

            如果它们是哈希，请执行以下操作：

            $('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); });

            如果你不想在 hash-click 上滚动，返回 false：

             $('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); return false; });

            【讨论】：

            • +1 适用于两种导航风格的可靠解决方案！
            • 如果 href 属性指向根 href="/" 或者在此过程中向 url 添加了更多参数会发生什么？它会大失败！永远不要相信用户！！！
            • 你不信任用户。客户端 javascript 正在解析您放入 HTML 中的链接。如果你想让它工作，不要把/放在链接前面或修改我的sn-ps以包含/。
            • 我的就是一个例子，我通常根据我正在使用的链接样式（我始终可以控制它）对其进行定制。对于需要参数的示例，请尝试将 $('ul.nav &gt; li &gt; a[href^="' + document.location.pathname + '"]') 作为选择器。
            • @konsumer：你真棒！ :)
            【解决方案9】：

            查看其他一些答案，如果您希望网页在单击侧边菜单时向下滚动到该部分，那么您不想preventDefault。

            另外，你只需要删除当前活动的类并添加一个新的，而不是搜索所有的li。当您选择的列表项已经处于活动状态时，您还希望代码不执行任何操作，而不是不必要地添加和删除相同的活动类。最后，您应该将事件侦听器放在 a 元素而不是 li 上，因为它更容易在 iPhone 和平板电脑等上触发点击事件。也可以使用 .delegate，这样您就不必等待 DOM 准备好事件。所以最后我会做这样的事情（我假设你已经预装了 jQuery）：

            $('body').delegate('.menu li a', 'click', function(){
    var $thisLi = $(this).parents('li:first');
    var $ul = $thisLi.parents('ul:first');
    if (!$thisLi.hasClass('active')){
        $ul.find('li.active').removeClass('active');
        $thisLi.addClass('active');
    }
});

            【讨论】：

              【解决方案10】：

              添加到您的 JavaScript：

              $(".menu li").click(function(e) {
    $(".menu li").removeClass("active");
    $(this).addClass("active");
    e.preventDefault();
});

              【讨论】：

                【解决方案11】：

                为了切换类，你需要执行一些 JavaScript。

                在 jQuery 中：

                $('.menu li a').click(function(e) {
  var $this = $(this);
  if (!$this.hasClass('active')) {
    $this.addClass('active');
  }
  e.preventDefault();
});

                在 JavaScript 中：

                var menu = document.querySelector('.menu');
var anchors = menu.getElementsByTagName('a');

for (var i = 0; i < anchors.length; i += 1) {
  anchors[i].addEventListener('click', function() { clickHandler(anchors[i]) }, false);
}

function clickHandler(anchor) {
  var hasClass = anchor.getAttribute('class');
  if (hasClass !== 'active') {
    anchor.setAttribute('class', 'active');
  }
}

                我希望这会有所帮助。

                【讨论】：

                • 尝试在 jquery 1.7.1 和 bootstrap.js 下的 jquery 中添加结束 body 标记之前，它没有工作。我不太了解 jquery，我想我只是错过了从引导 css 或 js 文件中调用一些东西。哦，好的，感谢您的快速回复。
                • 您需要确保 DOM 已准备就绪，以便您能够抓取选择器。在 jQuery 中，添加 $(document).ready(function() { // add code here } );
                • 我修改了 jQuery。事实证明.not() 不会返回true 或false 的布尔值。现在我正在检查它是否没有那个类。
                • 我想我会尝试使用 scrollspy 让它工作，但即使这样也很痛苦。希望文档更好。
                • 部分问题是我使用的是 cufon 字体，没有意识到它会导致颜色问题。感谢您的帮助。
                【解决方案12】：

                这是我处理 twitter 引导导航列表的代码：

                $(document).ready(function () {
        $('ul.nav > li').click(function (e) {
            e.preventDefault();
            $('ul.nav > li').removeClass('active');
            $(this).addClass('active');                
        });            
    });

                【讨论】：

                • 哇，当我尝试使用代码点火器时，这对我有用。你真棒:)
                • e.preventDefault() 将阻止链接打开。
                【解决方案13】：

                我做了一些不同的事情来解决这个问题（仅供参考，我是一个完整的 html/css/js 业余爱好者）。

                我的每个导航栏按钮都会转到一个新页面。所以，在每个页面的 html 中，我在底部放了这样的东西：

                <script type="text/javascript">
    $(document).ready( function(){
       $("#aboutButton").removeClass("active");
    });

    $(document).ready( function(){
       $("#dashboardButton").addClass("active");
    });
</script>

                这让它立即为我工作。

                附：我尝试了接受的答案，但没有运气，因为它还需要从当前活动按钮中删除“活动”类才能真正“切换”。我确信这是可能的，但我对这些东西还是很陌生。

                【讨论】：

                  猜你喜欢
                  相关资源
                  最近更新 更多
                  热门标签
                  Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode