javascript - Bootstrap Tab within Popover isn't working - Stack Overflow

admin管理员组

文章数量:1356413

Bootstrap's Tabs do not seem to be working for me when used within Bootstrap's Popover.

What happens is following:

 1. Popover opens
 2. Active tab on click changes
 3. Tab content is not changing <-- PROBLEM

Tabs are created correctly and if you try them outside of popover they work fine.

<a class="btn" id="btnPopover" href="#">Launch Popover</a>
<div class="tabbable hide" id="popoverContent">
<ul class="nav nav-tabs">
    <li class="tab active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li class="tab"><a href="#tab2" data-toggle="tab">Tab 2</a></li>
    <li class="tab"><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>
<div class="tab-content" style="padding-top: 15px">
    <div class="tab-pane active" id="tab1">Tab Content 1</div>
    <div class="tab-pane" id="tab2">Tab Content 2</div>
    <div class="tab-pane" id="tab3">Tab Content 3</div>
</div>

$(function () {
 $("#btnPopover").popover({
  html: true,
  trigger: 'click',
  title: "Title",
  placement: "bottom",
  content: $("#popoverContent").html()
 });
});

What seems to happen with bootstrap in this case is that it duplicates the elements. I planned using further javascript libs and plugins on elements within content tabs, and this makes it pretty much impossible, unless somebody provides a solid workaround. I honestly think this is a valid Bootstrap's bug.

jsfiddle demo: /

Bootstrap's Tabs do not seem to be working for me when used within Bootstrap's Popover.

What happens is following:

 1. Popover opens
 2. Active tab on click changes
 3. Tab content is not changing <-- PROBLEM

Tabs are created correctly and if you try them outside of popover they work fine.

<a class="btn" id="btnPopover" href="#">Launch Popover</a>
<div class="tabbable hide" id="popoverContent">
<ul class="nav nav-tabs">
    <li class="tab active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li class="tab"><a href="#tab2" data-toggle="tab">Tab 2</a></li>
    <li class="tab"><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>
<div class="tab-content" style="padding-top: 15px">
    <div class="tab-pane active" id="tab1">Tab Content 1</div>
    <div class="tab-pane" id="tab2">Tab Content 2</div>
    <div class="tab-pane" id="tab3">Tab Content 3</div>
</div>

$(function () {
 $("#btnPopover").popover({
  html: true,
  trigger: 'click',
  title: "Title",
  placement: "bottom",
  content: $("#popoverContent").html()
 });
});

What seems to happen with bootstrap in this case is that it duplicates the elements. I planned using further javascript libs and plugins on elements within content tabs, and this makes it pretty much impossible, unless somebody provides a solid workaround. I honestly think this is a valid Bootstrap's bug.

jsfiddle demo: http://jsfiddle/iboros/nCfBf/

• javascript
• jquery
• twitter-bootstrap
• tabs
• popover

Share Improve this question Follow edited Jun 1, 2013 at 6:17 PSL 124k2121 gold badges256256 silver badges243243 bronze badges asked Jun 1, 2013 at 5:33 iborosiboros 33722 gold badges55 silver badges1515 bronze badges 1

• 2 It's not Bootstrap that's duplicating the elements. It documents the content option as being markup (or markup resulting from a function). It doesn't directly support using elements already in the page. Your code duplicates the elements, by using existing DOM elements, taking their html, and providing it to Bootstrap to use for the content. The solution is quite simple: Just remove the elements you're duplicating (as @PSL shows). – T.J. Crowder Commented Jun 1, 2013 at 6:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Option 1:

Remove the existing tab and get its HTML content.

$("#btnPopover").popover({
    html: true,
    trigger: 'click',
    title: "Title",
    placement: "bottom",
    content: $('#popoverContent').remove().html()
});

Demo

Option 2:

Use class selector for tabs instead of id selector

i.e

<a href=".tab2" data-toggle="tab">Tab 2</a>

instead of

<a href="#tab2" data-toggle="tab">Tab 2</a>

Html

<div class="tabbable hide" id="popoverContent">
     <ul class="nav nav-tabs">
        <li class="active"><a href=".tab1" data-toggle="tab">Tab 1</a></li>
        <li class="tab"><a href=".tab2" data-toggle="tab">Tab 2</a></li>
        <li class="tab"><a href=".tab3" data-toggle="tab">Tab 3</a></li>
    </ul>
    <div class="tab-content" style="padding-top: 15px">
        <div class="tab-pane active tab1" >Tab Content 1</div>
        <div class="tab-pane tab2">Tab Content 2</div>
        <div class="tab-pane tab3" >Tab Content 3</div>
    </div>
</div>
<a class="btn" id="btnPopover" href="#">Launch Popover</a>

Demo

本文标签： javascriptBootstrap Tab within Popover isn39t workingStack Overflow