Question

我已经尝试了几乎所有可以找到的迭代来实现这一点。

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <img src="tile.png" alt="Brand">
      </div>
      <div id="navbar" class="navbar-inverse collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-left">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#features">Features</a></li>
          <li><a href="#testimonials">Testimonials</a></li>
          <li><a href="#contact-us">Contact Us</a></li>
        </ul>

这是我正在处理的导航栏部分。

我在不同的时间尝试了以下js / jquery。

    $(document).ready(function () {
    $('.navbar-left li').on('click', function (e) {
        $(this).addClass('active').siblings().removeClass('active');
    });
});




$(".nav a").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).parent().addClass("active");
});


$(document).ready(function(){
$(".navbar-nav a").click(function(){
    $(this).tab('show');
});


$('.navbar-nav a').on('shown.bs.tab', function(event){
        var x = $(event.target).text();         // active tab
        var y = $(event.relatedTarget).text();  // previous tab
        $(".act span").text(x);
        $(".prev span").text(y);
    });
});


// Select all tabs
$('.navbar-nav a').click(function(){
    $(this).tab('show');
})

// Select tab by name
$('.navbar-nav a[href="#home"]').tab('show')

// Select first tab
$('.navbar-nav a[href="#features"]').tab('show')

// Select last tab
$('.navbar-nav a[href="#testimonials"]').tab('show')

// Select fourth tab (zero-based)
$('.navbar-nav a[href="#contact-us"]').tab('show')

*上面的最后一个用于移动活动，但实际上没有导航

var menu = document.querySelector('nav.ul');
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');
  }
}

他们中的大多数人都没有做任何事情，但是当您点击它时，那些能够改变主动突出显示的那些并不能实际导航。我在这里错过了什么？我需要做的就是更改突出显示并导航到链接。

Answer 1

$(document).ready(function () {
    $('.navbar-left li').on('click', function (e) {
        $(this).addClass('active').siblings().removeClass('active');
    });
});

这个工作了;我有一个问题，缩进和错误）第一次弄乱代码并没有注意到它。

导航栏上的Twitter引导程序更改处于活动状态

1 个答案: