Twitter Bootstrap – 选项卡 – URL不会更改
我正在使用Twitter Bootstrap及其“标签”。
我有以下代码：
<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。
当我删除data-toggle URL更改，但标签不起作用。
任何解决scheme？
试试这个代码。 它添加选项卡href的url+打开选项卡基于页面加载哈希：
$(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); }); });
完整的解决scheme需要三个组件：
- 如果URL中存在散列，则在加载页面时显示正确的选项卡。
- 选项卡更改时更改URL中的哈希值。
- 在URL（后退/前进button）中散列更改时更改选项卡，并确保第一个选项卡正确循环。
我不认为这里的任何评论，也不是接受的答案，处理所有这些情况。
由于涉及的内容相当多，我认为它是最小的jQuery插件： https ： //github.com/aidanlister/jquery-stickytabs
你可以这样调用插件：
$('.nav-tabs').stickyTabs();
我已经为此写了一篇博文， http://aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/
使用data-toggle="tab" 要求插件处理选项卡，这样做时会调用事件（ github上的代码 ）的preventDefault 。
您可以使用自己的选项卡激活，并让事件通过：
$('.nav-tabs a').click(function (e) { // No e.preventDefault() here $(this).tab('show'); });
你必须删除属性data-toggle="tab"
如果您有疑问，请检查文档 。
由于您的锚点元素已经改变了url哈希值，所以监听onhashchange事件是另一个不错的select。 正如@flori已经提到的，这种方法与浏览器后退button很好。
var tabs$ = $(".nav-tabs a"); $( window ).on("hashchange", function() { var hash = window.location.hash, // get current hash menu_item$ = tabs$.filter('[href="' + hash + '"]'); // get the menu element menu_item$.tab("show"); // call bootstrap to show the tab }).trigger("hashchange");
最后，在定义侦听器之后触发事件也将有助于在页面加载时显示正确的选项卡。
我对你的问题的解决scheme：
首先为每个链接添加新的data-value属性，如下所示：
<ul class="nav nav-tabs"> <li class="active"> <a data-toggle="tab" href="#tab-add" data-value="#add">add</a> </li> <li> <a data-toggle="tab" href="#tab-edit" data-value="#edit">edit</a> </li> <li> <a data-toggle="tab" href="#tab-delete" data-value="#delete">delete</a> </li> </ul>
其次，改变标签的ID，例如从add到tab-add ，也更新hrefs以包括tab-add前缀：
<div class="tab-content"> <div class="tab-pane" id="tab-add">Add panel</div> <div class="tab-pane" id="tab-edit">Edit panel</div> <div class="tab-pane" id="tab-delete">Panel panel</div> </div>
最后js代码：
<script type="text/javascript"> $(function () { var navTabs = $('.nav-tabs a'); var hash = window.location.hash; hash && navTabs.filter('[data-value="' + hash + '"]').tab('show'); navTabs.on('shown', function (e) { var newhash = $(e.target).attr('data-value'); window.location.hash = newhash; }); }) </script>
这里是jsFiddle – 但它不工作，因为jsFiddle使用的iframe，但你可以阅读我的解决scheme的来源。
也有一个简单的方法来反应哈希变化（例如后退button）。 只需将一个hashchange事件监听器添加到tomaszbak解决scheme：
$(function(){ // Change tab on load 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(); window.location.hash = this.hash; $('html,body').scrollTop(scrollmem); }); // Change tab on hashchange window.addEventListener('hashchange', function() { var changedHash = window.location.hash; changedHash && $('ul.nav a[href="' + changedHash + '"]').tab('show'); }, false); });
与CakePHP与Bootstrap 3标签同样的问题，加上当我用外部URL和锚发送，它跳转到部分失去我的菜单后，审查了许多解决scheme，使…
感谢： http : //ck.kennt-wayne.de/2012/dec/twitter-bootstrap-how-to-fix-tabs
$(document).ready(function() { //Redirecciona al tab, usando un prefijo al cargar por primera vez, al usar redirect en cake #_Pagos //Redirecciona al tab, usando #Pagos /* Automagically jump on good tab based on anchor; for page reloads or links */ if(location.hash) { $('a[href=' + location.hash + ']').tab('show'); } //Para evitar el bajar al nivel del tab, (al mostrarse el tab subimos) $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { location.hash = $(e.target).attr('href').substr(1); scrollTo(0,0); }); //Actualiza el URL con el anchor o ancla del tab al darle clic /* Update hash based on tab, basically restores browser default behavior to fix bootstrap tabs */ $(document.body).on("click", "a[data-toggle]", function(event) { location.hash = this.getAttribute("href"); }); //Redirecciona al tab, al usar los botones de regresar y avanzar del navegador. /* on history back activate the tab of the location hash if exists or the default tab if no hash exists */ $(window).on('popstate', function() { //Si se accesa al menu, se regresa al tab del perfil (activo default), fixed conflict with menu //var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href"); var anchor = location.hash; $('a[href=' + anchor + ']').tab('show'); }); });//Fin OnReady
最简单的假设你正在使用文档中描述的data-toggle="tab"语法：
$(document).on('shown.bs.tab', function(event) { window.location.hash = $(event.target).attr('href'); });
对于那些使用Ruby on Rails或任何其他服务器端脚本，您将需要在path上使用anchor选项。 这是因为一旦页面加载，它就没有可用的URL哈希值。 您需要通过链接或表单提交提供正确的标签。
<%= form_for @foo, url: foo_path(@foo, anchor: dom_id(foo)) do |f| %> # Or <%= link_to 'Foo', foo_path(@foo, anchor: dom_id(foo)) %>
如果您使用前缀来防止窗口跳转到ID：
<%= form_for @foo, url: foo_path(@foo, anchor: "bar_#{dom_id(foo)}") do |f| %>
那你CoffeeScript：
hash = document.location.hash prefix = 'bar_' $('.nav-tabs a[href=' + hash.replace(prefix, '') + ']').tab 'show' if hash $('.nav-tabs a').on 'shown.bs.tab', (e) -> window.location.hash = e.target.hash.replace '#', '#' + prefix
或JavaScript：
var hash, prefix; hash = document.location.hash; prefix = 'bar_'; if (hash) { $('.nav-tabs a[href=' + hash.replace(prefix, '') + ']').tab('show'); } $('.nav-tabs a').on('shown.bs.tab', function(e) { window.location.hash = e.target.hash.replace('#', '#' + prefix); });
这应该在Bootstrap 3中工作。
感谢@tomaszbak的原始解决scheme，但是由于我的编辑被拒绝，我无法评论他的post，但我会离开我稍微改进和更可读的版本在这里。
它基本上是一样的东西，但如果修复了我与他的跨浏览器兼容性问题。
$(document).ready(function(){ // go to hash on window load var hash = window.location.hash; if (hash) { $('ul.nav a[href="' + hash + '"]').tab('show'); } // change hash on click $('.nav-tabs a').click(function (e) { $(this).tab('show'); if($('html').scrollTop()){ var scrollmem = $('html').scrollTop(); // get scrollbar position (firefox) }else{ var scrollmem = $('body').scrollTop(); // get scrollbar position (chrome) } window.location.hash = this.hash; $('html,body').scrollTop(scrollmem); // set scrollbar position }); });
以下是使用history.pushState的选项，以便您可以使用浏览器历史logging返回到以前的选项卡
$(document).ready(function() { // add a hash to the URL when the user clicks on a tab $('a[data-toggle="tab"]').on('click', function(e) { history.pushState(null, null, $(this).attr('href')); }); // navigate to a tab when the history changes window.addEventListener("popstate", function(e) { var activeTab = $('[href=' + location.hash + ']'); if (activeTab.length) { activeTab.tab('show'); } else { $('.nav-tabs a:first').tab('show'); } }); });
我正在使用Bootstrap 3.3。*并没有上述解决scheme帮助我，甚至标记为答案。 我刚刚添加下面的脚本和工作。
$(function(){ var hash = document.location.hash; if (hash) { $('.navbar-nav a[href="' + hash + '"]').tab('show'); } $('a[data-toggle="tab"]').on('click', function (e) { history.pushState(null, null, $(this).attr('href')); }); });
希望这可以帮助你。
以上都没有为我工作，所以这是我的工作方式：
- 将
class="tab-link"到需要此function的所有链接 - 将以下代码添加到您的javascript：
window.addEventListener
（
如 'popstate'，
function（事件）
{
tab_change（）;
}
）;
函数tab_change（）
{
var hash = window.location.hash;
hash && $（'ul.nav a [href =“'+ hash +'”]'）.tab（'show'）;
$（'.tab-link'）.click
（
function（e）
{
$（this）.tab（'show'）;
var scrollmem = $（'body'）.scrollTop（）|| $（'html'）.scrollTop（）;
window.location.hash = this.hash;
$（'html，body'）.scrollTop（scrollmem）;
$（'ul.nav-tabs a [href =“'+ window.location.hash +'”]'）.tab（'show'）;
}
）;
}
这也修复了一个非常晦涩的选项卡使用jquery和bootstrap时不会触发的href
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $('.nav-tabs a').click(function (e) { // No e.preventDefault() here. $(this).tab('show'); }); </script> <script src="twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
