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

Question

I want the make bootstrap tabs work even outside the tab panel. 我希望make bootstrap选项卡即使在选项卡面板之外也可以工作。 I have seen the tabs work outside the tab-panel just like in this example http://jsfiddle.net/s6bP9/ . 我已经看到选项卡在选项卡面板之外工作，就像本示例http://jsfiddle.net/s6bP9/一样。 But i want it in different way. 但是我想要不同的方式。

I have 2 paragraphs outside the bootstrap tab-panel and bootstrap tabs code below. 我在下面的引导选项卡面板和引导选项卡代码之外有2个段落。 i want class first para to be displayed along with bootstrap tab-content when i click the #tab1 nav-tabs links and second para to be displayed on click of #tab2 link. 当我单击＃tab1导航选项卡链接时，我希望班级的第一段与引导选项卡内容一起显示，而单击＃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>

Thanks in advance, 提前致谢，

Answer 1

Add the classes firstPara and secondPara to your two paragraphs and then use the following code. 将类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/ http://jsfiddle.net/s6bP9/42/

Answer 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()); }) })

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-08-18 11:52:39

解决方案2
0 2015-08-18 12:02:18

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-08-18 11:52:39

解决方案2 0 2015-08-18 12:02:18

解决方案1
1 已采纳 2015-08-18 11:52:39

解决方案2
0 2015-08-18 12:02:18