首页 文章

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

提问于
浏览 次
0

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

我在bootstrap tab-panel和bootstrap选项卡代码之外有2个段落 . 我希望类 first para 与引导标签内容一起显示，当我单击 #tab1 nav-tabs链接时， second 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

2 回答

  • 1

    看看我的小提琴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()); }) })

    回复于
  • 0

    将类 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/

    回复于

相关问题