我正在尝试嵌套两个引导选项卡，但是应该显示嵌套选项卡的第一个选项卡会显示两个选项卡的内容，一个在另一个之下。这是代码，我使用jquery 1.11.1和bootstrap，任何人都知道如何解决这个混乱？
<ul id="general-tabs" class="nav nav-tabs">
<li class="active"><a href="#tab-general" data-toggle="tab">General</a></li>
<li id="shipping_tab"><a href="#tab-shipping" data-toggle="tab">Shipping</a></li>
<li><a href="#tab-options" data-toggle="tab">Options</a></li>
<li><a href="#tab-specials" data-toggle="tab">Special prices</a></li>
<li><a href="#tab-discounts" data-toggle="tab">Quantity discounts</a></li>
</ul>
<!-- general tab -->
<div class="tab-content ms-product">
<div id="tab-general" class="tab-pane active">
<ul class="nav nav-tabs" id="language-tabs">
<li><a class="lang" data-toggle="tab" href="#language1"><img src="image/flags/gb.png" title="English" /> English</a></li>
<li><a class="lang" data-toggle="tab" href="#language2"><img src="image/flags/it.png" title="Italiano" /> Italiano</a></li>
</ul>
<div class="ms-language-div" id="language1">
<fieldset>
<legend>Name & Description</legend>
<div class="form-group required">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="languages[1][product_name]" value="Agate and silver necklace" />
<p class="ms-note">Specify a name for your product</p>
<p class="error" id="error_product_name_1"></p>
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<!-- todo strip tags if rte disabled -->
<textarea name="languages[1][product_description]" class="form-control ">Integer et diam ut est vestibulum ullamcorper ac mattis quam. Integer felis felis, gravida vitae sapien vitae, semper fringilla enim. Quisque commodo nisl in ligula ultrices aliquam. Vestibulum non sem elementum, fringilla augue commodo, porttitor ipsum. Pellentesque ac pretium lacus, sed molestie nisl. Nulla fringilla eu nulla at varius. Nulla semper imperdiet orci, vel sodales arcu fringilla sed. Sed non urna justo. Etiam gravida, nunc in tincidunt tincidunt, nisl eros aliquet libero, sed molestie elit nulla scelerisque magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi convallis posuere aliquam.
</textarea>
<p class="ms-note">Describe your product</p>
<p class="error" id="error_product_description_1"></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Tags</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="languages[1][product_tags]" value="" />
<p class="ms-note">Specify tags for your product.</p>
<p class="error" id="error_product_tags_1"></p>
</div>
</div>
</fieldset>
</div>
<div class="ms-language-div" id="language2">
<fieldset>
<legend>Name & Description</legend>
<div class="form-group ">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="languages[2][product_name]" value="italiano" />
<p class="ms-note">Specify a name for your product</p>
<p class="error" id="error_product_name_2"></p>
</div>
</div>
<div class="form-group ">
<label class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<!-- todo strip tags if rte disabled -->
<textarea name="languages[2][product_description]" class="form-control ">Integer et diam ut est vestibulum ullamcorper ac mattis quam. Integer felis felis, gravida vitae sapien vitae, semper fringilla enim. Quisque commodo nisl in ligula ultrices aliquam. Vestibulum non sem elementum, fringilla augue commodo, porttitor ipsum. Pellentesque ac pretium lacus, sed molestie nisl. Nulla fringilla eu nulla at varius. Nulla semper imperdiet orci, vel sodales arcu fringilla sed. Sed non urna justo. Etiam gravida, nunc in tincidunt tincidunt, nisl eros aliquet libero, sed molestie elit nulla scelerisque magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi convallis posuere aliquam.
</textarea>
<p class="ms-note">Describe your product</p>
<p class="error" id="error_product_description_2"></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Tags</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="languages[2][product_tags]" value="" />
<p class="ms-note">Specify tags for your product.</p>
<p class="error" id="error_product_tags_2"></p>
</div>
</div>
</fieldset>
</div>
<fieldset>
<legend>Price & Attributes</legend>
<div class="form-group required">
<label class="col-sm-2 control-label">Price</label>
<div class="col-sm-10">
<span class="vertical-align: auto">$</span>
<input type="text" class="form-control inline" name="product_price" value="50" />
<span class="vertical-align: auto"></span>
<p class="ms-note">Choose a price for your product</p>
<p class="error" id="error_product_price"></p>
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label">Category</label>
<div class="col-sm-10" id="product_category_block">
<select class="form-control" name="product_category">
<option value=""></option>
<option value="299" >Chairs</option>
<input type="radio" name="product_enable_shipping" value="0" />
No <p class="ms-note">Specify whether your product requires shipping</p>
<p class="error" id="error_product_enable_shipping"></p>
</div>
</div>
<div class="form-group" style="display: none">
<label class="col-sm-2 control-label">Quantity</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="product_quantity" value="999" class="ffUnchangeable" />
<p class="ms-note">Specify the quantity of your product</p>
<p class="error" id="error_product_quantity"></p>
</div>
</div>
<input type="hidden" class="form-control" name="product_quantity" value="5" />
</fieldset>
<fieldset>
<legend>Files</legend>
<div class="form-group ">
<label class="col-sm-2 control-label">Images</label>
<div class="col-sm-10">
<!--<input type="file" name="ms-file-addimages" id="ms-file-addimages" />-->
<a name="ms-file-addimages" id="ms-file-addimages" class="btn btn-primary"><span>Select images</span></a>
<p class="ms-note">Select images for your product. First image will be used as a thumbnail. You can change the order of the images by dragging them. Allowed extensions: png,jpg,jpeg</p>
<div class="error" id="error_product_image"></div>
<div class="image progress"></div>
<div class="product_image_files">
<div class="ms-image">
<input type="hidden" name="product_images[]" value="catalog/demo/samsung_tab_1.jpg" />
<img src="http://localhost/opencart/image/tmp/samsung_tab_1-100x100.jpg" />
<span class="ms-remove"></span>
</div>
</div>
</div>
</div>
<div class="form-group ">
<label class="col-sm-2 control-label">Downloads</label>
<div class="col-sm-10">
<!--<input type="file" name="ms-file-addfiles" id="ms-file-addfiles" />-->
<a name="ms-file-addfiles" id="ms-file-addfiles" class="btn btn-primary"><span>Select files</span></a>
<p class="ms-note">Upload files for your product. Allowed extensions: zip,rar,pdf</p>
<div class="error" id="error_product_download"></div>
<div class="download progress"></div>
<div class="product_download_files">
</div>
<div style="display: none">
<input type="checkbox" name="push_downloads" id="push_downloads" />
<label>Push updates to previous customers</label>
<p class="ms-note">Newly added and updated downloads will be made available to previous customers</p>
</div>
</div>
</div>
</fieldset>
</div>
<!-- data tab -->
<div id="tab-data" class="tab-pane">
</div>
<!-- options tab -->
<div id="tab-options" class="tab-pane"></div>
<div id="tab-shipping" class="tab-pane"></div>
<!-- specials tab -->
<div id="tab-specials" class="tab-pane">
<legend>Special prices</legend>
<p class="error" id="error_specials"></p>
<table class="list table table-bordered table-hover">
<thead>
<tr>
<td><span class="required">*</span>Priority</td>
<td><span class="required">*</span>Price</td>
<td><span class="required">*</span>Start date</td>
<td><span class="required">*</span>End date</td>
<td></td>
</tr>
</thead>
<tbody>
<!-- sample row -->
<tr class="ffSample">
<td><input type="text" class="form-control inline" name="product_specials[0][priority]" value="" size="2" /></td>
<td><input type="text" class="form-control inline" name="product_specials[0][price]" value="" /></td>
<td>
<div class="input-group date">
<input type="text" class="form-control inline" name="product_specials[0][date_start]" value="" data-date-format="YYYY-MM-DD" />
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
</td>
<td>
<div class="input-group date">
<input type="text" class="form-control inline" name="product_specials[0][date_end]" value="" data-date-format="YYYY-MM-DD" />
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
</td>
<td><a class="ms-button-delete" title="Delete"></a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center"><a class="btn btn-primary ffClone">Define a new special price</a></td>
</tr>
</tfoot>
</table>
</div>
<!-- Quantity Discounts tab -->
<div id="tab-discounts" class="tab-pane">
<legend>Quantity discounts</legend>
<p class="error" id="error_quantity_discounts"></p>
<table class="list table table-bordered table-hover">
<thead>
<tr>
<td><span class="required">*</span>Priority</td>
<td><span class="required">*</span>Quantity</td>
<td><span class="required">*</span>Price</td>
<td><span class="required">*</span>Start date</td>
<td><span class="required">*</span>End date</td>
<td></td>
</tr>
</thead>
<tbody>
<!-- sample row -->
<tr class="ffSample">
<td><input type="text" class="form-control inline" name="product_discounts[0][priority]" value="" size="2" /></td>
<td><input type="text" class="form-control inline" name="product_discounts[0][quantity]" value="" size="2" /></td>
<td><input type="text" class="form-control inline" name="product_discounts[0][price]" value="" /></td>
<td>
<div class="input-group date">
<input type="text" class="form-control inline" name="product_discounts[0][date_start]" value="" data-date-format="YYYY-MM-DD" />
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
</td>
<td>
<div class="input-group date">
<input type="text" class="form-control inline" name="product_discounts[0][date_end]" value="" data-date-format="YYYY-MM-DD" />
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
</td>
<td><a class="ms-button-delete" title="Delete"></a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6" class="text-center"><a class="btn btn-primary ffClone">Define a new quantity discount</a></td>
</tr>
</tfoot>
</table>
</div>
</div>
答案 0 :(得分：0)
这是我嵌套标签的方式。
jsfiddle - http://jsfiddle.net/52VtD/9957/
<ul class="nav nav-tabs" id="nested-tabs">
<li><a href="#root-tab" data-toggle="tab"><b>root</b></a></li>
</ul>
<div class="tab-content">
<div id="root-tab" class="tab-pane">
<ul class="nav nav-tabs" id="nested-tabs">
<li><a href="#nested" data-toggle="tab"><b>All</b></a></li>
</ul>
</div>
<div class="tab-content">
<div id="nested" class="tab-pane">
<p>Some Content</p>
</div>
</div>