2

我试图让引导程序在页面加载时跳转到特定的选项卡。虽然我在这里找到的答案很少，但在我的特殊情况下，我有嵌套的选项卡，这使事情变得复杂。现在我已经实现了https://stackoverflow.com/a/15060168/1829478中的解决方案，但是我仍然无法让它工作。他提到“孩子应该有 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);
        }
    });
}
4

1 回答 1

1

我希望这对某人有所帮助，它是带有哈希的嵌套选项卡的完整工作解决方案，因此您可以从 url 导航到嵌套选项卡。

为了构建它，我使用了此代码中的引导嵌套选项卡 --> 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>
于 2014-01-13T02:30:32.510 回答