[英]Twitter bootstrap go to specific tab for nested tabs
I'm trying to have bootstrap jump to a specific tab upon page load. 我正在尝试让引导程序在页面加载时跳转到特定选项卡。 While I've found few answers here, in my particular case I have nested tabs which complicates things. 虽然我在这里找不到几个答案,但在我的特殊情况下,我却嵌套了一些选项卡,这些选项使事情复杂化。 Right now I have implemented the solution as in https://stackoverflow.com/a/15060168/1829478 , however I'm still having trouble getting it to work. 现在,我已经在https://stackoverflow.com/a/15060168/1829478中实现了该解决方案,但是我仍然无法使它正常工作。 He mentioned that "childrens should have class="nested"" , what does that mean? 他提到“孩子应该有class =“ nested””,这是什么意思?
function handleTabLinks() {
if(window.location.hash == '') {
window.location.hash = window.location.hash + '#_';
}
var hash = window.location.hash.split('#')[1];
var prefix = '_';
var hpieces = hash.split('/');
for (var i=0;i<hpieces.length;i++) {
var domelid = hpieces[i].replace(prefix,'');
var domitem = $('a[href=#' + domelid + '][data-toggle=tab]');
if (domitem.length > 0) {
domitem.tab('show');
}
}
$('a[data-toggle=tab]').on('shown', function (e) {
if ($(this).hasClass('nested')) {
var nested = window.location.hash.split('/');
window.location.hash = nested[0] + '/' + e.target.hash.split('#')[1];
} else {
window.location.hash = e.target.hash.replace('#', '#' + prefix);
}
});
}
I hope this helps someone, it's a complete working solution for nested tabs with a hash so you can navigate to the nested tab from a url. 我希望这对某人有帮助,它是带哈希的嵌套选项卡的完整工作解决方案,因此您可以从URL导航到嵌套选项卡。
To build this I used the bootstrap nested tabs from this code --> http://jsfiddle.net/simbirsk/RS4Xh/2/ and the javascript from here --> https://stackoverflow.com/a/15060168/1829478 为了构建它,我使用了这段代码中的引导嵌套选项卡-> http://jsfiddle.net/simbirsk/RS4Xh/2/和此处的javascript-> https://stackoverflow.com/a/15060168/1829478
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab" onclick="handleTabLinks();">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab" onclick="handleTabLinks();">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab3" data-toggle="tab" class="nested" onclick="handleTabLinks();">Section 3</a></li>
<li><a href="#tab4" data-toggle="tab" class="nested" onclick="handleTabLinks();">Section 4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active nested" id="tab3">
<p>I'm in Section 3.</p>
</div>
<div class="tab-pane nested" id="tab4">
<p>Howdy, I'm in Section 4.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
handleTabLinks();
function handleTabLinks() {
if(window.location.hash == '') {
window.location.hash = window.location.hash + '#_';
}
var hash = window.location.hash.split('#')[1];
var prefix = '_';
var hpieces = hash.split('/');
for (var i=0;i<hpieces.length;i++) {
var domelid = hpieces[i].replace(prefix,'');
var domitem = $('a[href=#' + domelid + '][data-toggle=tab]');
if (domitem.length > 0) {
domitem.tab('show');
}
}
$('a[data-toggle=tab]').on('shown', function (e) {
if ($(this).hasClass('nested')) {
var nested = window.location.hash.split('/');
window.location.hash = nested[0] + '/' + e.target.hash.split('#')[1];
} else {
window.location.hash = e.target.hash.replace('#', '#' + prefix);
}
});
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.