Question

我正在使用Twitter Bootstrap的博客示例，导航看起来像：

<div class="blog-masthead">
  <div class="container">
    <nav class="blog-nav">
      <a class="blog-nav-item" href="/one">Three</a>
      <a class="blog-nav-item" href="/two">Three</a>
      <a class="blog-nav-item" href="/three">Three</a>
    </nav>
  </div>
</div>

我的想法是通过查询显示活动链接：

<script>
  $(document).ready(function(){
    $('nav a').click(function (e){
      e.preventDefault(); 
      $('nav a').removeClass('active');
      $(this).addClass('active');
    });
  });
</script>

但现在我的链接不再可点击了。活动标签显示。怎么办？

Answer 1

e.preventDefault（event.preventDefault）的作业是防止与您正在侦听的元素关联的默认行为。锚点的默认行为是在某处导航。

因此，您的链接将不再触发页面更改。删除e.preventDefault()语句，您的链接将再次有效。

但是，你的想法确实存在根本问题。 JavaScript将无法执行您想要的操作，因为导航到新页面意味着重置页面的状态。就好像你的JavaScript从未运行过一样:(

Answer 2

您正在阻止默认操作！您是说要显示当前使用＆＃34;活动＆＃34;的页面？类？怎么样：

$(document).ready(function() {
  var path = window.location.pathname;
  $('a[href="' + path + '"]').addClass('active');
});

我确实看到你正在添加一个点击处理程序，所以它是其他的吗？

Answer 3

好的回答我自己的问题......简单的javascript

<script>
var filename=$(location).attr('href');
$(document).ready( function(){
  $('nav > a').each(function(){
    var my_list_of_href= $(this).attr('href');
    //console.log(my_list_of_href);

    if (filename.substring(0,my_list_of_href.length)===my_list_of_href){
      $(this).addClass("active");

    }
  });
});
</script>

Answer 4

e.preventDefault();阻止默认浏览器行为，例如点击网址

Answer 5

关闭梦想家的回答

function activeNav() {
  var path = window.location.pathname;
  jQuery('a[href="' + path + '"]').addClass('active');
}

jQuery(document).ready( function () {
  activeNav();
  jQuery(document).on( 'page:load', function () {
    activeNav();
  });
});

twitter bootstrap example-blog show active：nav a

5 个答案: