我正在尝试嵌套两个 Bootstrap 选项卡，但应该显示嵌套选项卡的第一个选项卡显示了两个选项卡的内容。这是代码，我正在使用 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>最佳答案
这就是我嵌套标签的方式。
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>
关于javascript - 选项卡中的嵌套选项卡( Bootstrap )，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27974543/