Is it possible to put the bootstrap tab-content outside the tab panel
Question
I want the make bootstrap tabs work even outside the tab panel. I have seen the tabs work outside the tab-panel just like in this example 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. 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.
<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,
2 answers
solution1
1 ACCPTED 2015-08-18 11:52:39
Add the classes firstPara and secondPara to your two paragraphs and then use the following code.
$('.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();
})
solution2
0 2015-08-18 12:02:18
看看我的小提琴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()); }) })
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.