Twitter Bootstrap-选项卡-URL不变 [英] Twitter Bootstrap - Tabs - URL doesn't change

问题描述

我正在使用Twitter Bootstrap及其选项卡".

I'm using Twitter Bootstrap and its "tabs".

我有以下代码:

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#add">add</a></li>
    <li><a data-toggle="tab" href="#edit" >edit</a></li>
    <li><a data-toggle="tab" href="#delete" >delete</a></li>
</ul>

标签正常工作，但未在URL中添加#add，#edit，#delete.

The tabs work properly, but the in the URL is not added the #add, #edit, #delete.

当我删除data-toggle时，URL会更改，但是选项卡不起作用.

When I remove data-toggle the URL changes, but the tabs don't work.

有什么解决办法吗?

推荐答案

尝试此代码.它将标签href添加到url，然后根据页面加载时的哈希值打开标签:

Try this code. It adds tab href to url + opens tab based on hash on page load:

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');

  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop() || $('html').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});

这篇关于Twitter Bootstrap-选项卡-URL不变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！