是否可以将引导选项卡内容放在选项卡面板之外答案

【问题标题】：Is it possible to put the bootstrap tab-content outside the tab panel是否可以将引导选项卡内容放在选项卡面板之外
【发布时间】：2015-08-18 11:40:10
【问题描述】：

我希望 make bootstrap 选项卡即使在选项卡面板之外也能正常工作。我已经看到选项卡在选项卡面板之外工作，就像在此示例 http://jsfiddle.net/s6bP9/ 中一样。但我想要以不同的方式。

我在下面的引导选项卡面板和引导选项卡代码之外有 2 个段落。当我单击 #tab1 导航选项卡链接和 second para 时，我希望类 first para 与引导选项卡内容一起显示在点击 #tab2 链接时显示。

<body>
<p>This content is linked to tab1</p>
<p>This content is linked to tab2</p>

<div role="tabpanel" class="row">
                    <!-- Nav tabs -->
                    <div class="col-sm-3">
                        <ul class="nav nav-tabs benefits-tab fa-ul" role="tablist">
                           <li role="presentation"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">TAB1</a></li>
                            <li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">TAB2</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-9">
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane fade in active" id="tab1">

                                <h1>TAB1</h1>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                            </div>
                            <div role="tabpanel" class="tab-pane fade" id="tab2">

                                <h1>TAB2</h1>
                                <p>Lorem ipsum dolor sit amet, </p>

                            </div> 
                        </div>
                    </div>
                </div>

提前致谢，

【问题讨论】：

标签： jquery html twitter-bootstrap

【解决方案1】：

将firstPara 和secondPara 类添加到您的两个段落中，然后使用以下代码。

$('.secondPara').hide();

$('a[data-toggle="tab"][href="#tab1"]').on('shown.bs.tab', function (e) {
    $('.firstPara').show();
    $('.secondPara').hide();
})

$('a[data-toggle="tab"][href="#tab2"]').on('shown.bs.tab', function (e) {
    $('.firstPara').hide();
    $('.secondPara').show();
})

http://jsfiddle.net/s6bP9/42/

【讨论】：

非常感谢 DGS .. 它对我有用。向你致敬。我可以使用此链接 bootply.com/rg7f7CLlFR 中的 javascript 从另一个页面的参考中访问特定选项卡。但是当我直接从另一个页面中的链接打开 tab2 时，我得到了 firstPara 元素的内容。我可以得到确切的内容吗（即点击该链接时secondPara 的元素。我知道这是因为$('.secondPara').hide(); 而发生的。我们不能得到确切的内容吗？？？
是的，$('.secondPara').hide() 调用只是默认firstPara 是显示的第一段。

【解决方案2】：

看看我的小提琴http://jsfiddle.net/punkhaa/k6vbgf3d/1/希望这对你有用

$(document).ready(function(){ $('ul li a').on('click',function(){ console.log("aaa",$(".para_"+$(this).attr('aria-controls'))); $($(this).attr('href')).append($(".para_"+$(this).attr('aria-controls')).html()); }) })

【讨论】：