Question

我希望make bootstrap选项卡甚至可以在选项卡面板之外工作。我已经看到选项卡在选项卡面板之外工作，就像在这个示例http://jsfiddle.net/s6bP9/中一样。但我想用不同的方式。

我在引导标签面板和引导标签代码之外有2个段落。当我点击＃tab1 导航标签链接和第二段时，我希望课程第一段与bootstrap标签内容一起显示单击＃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>

提前致谢，

Answer 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/

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 个答案: