我在 JQuery 隐藏和显示选项卡方面遇到了问题。
我有两个列表想要显示或隐藏,如果我点击
而如果我点击
这是我的HTML和JQuery代码:
HTML:
以下是我的Jquery代码:
我的代码只能点击一个标签,而另一个标签无法显示。 我尝试了很多方法,但这个应该是最接近的了。 谢谢。
我有两个列表想要显示或隐藏,如果我点击
<a href="#tab-description">Description</a>
,那么我想要显示具有 id=tab-description
的 div
。而如果我点击
<a href="#tab-additional_information">Description</a>
,那么我想要显示具有id=tab-additional_information
的div
。这是我的HTML和JQuery代码:
HTML:
<div class="col-sm-6" id="tabs-container">
<div class="woocommerce-tabs">
<ul class="tabs nav nav-tabs" id="myTabs">
<li class="description_tab" role="presentation">
<a href="#tab-description">Description</a>
</li>
<li class="additional_information_tab" role="presentation">
<a href="#tab-additional_information">Additional Information</a>
</li>
</ul>
<div class="panel entry-content tab-pane" id="tab-description">
<h2>Product Description</h2>
<p><strong>Electrolux Blender Glass 1.5L 450W – EBR2601</strong></p>
<p>Features :</p>
<ul>
<li>Power : 450 Watt</li>
<li>Kapaitas : 1.5 Liter</li>
<li>Jar : Kaca</li>
<li>Memiliki 3 level kecepatan + Tombol Pulse</li>
<li>Bisa menghancurkan es</li>
<li>4 mata pisau stainless steel</li>
<li>Kaki karet anti slip</li>
</ul>
</div>
<div class="panel entry-content tab-pane" id="tab-additional_information" style="display: none;">
<h2 class="caption-additional-information">Additional Information</h2>
<table class="shop_attributes">
<tbody>
<tr class="">
<th>Weight</th>
<td class="product_weight">5 kg</td>
</tr>
</tbody>
</table>
</div>
</div>
以下是我的Jquery代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
$("#tab-additional_information").hide();
$(document).ready(function(){
$(".tabs").find('li').each(function( index ){
$(".tabs").find('li').click(function(e){
e.preventDefault();
if($("#tab-additional_information").hide()){
$("#tab-additional_information").show();
$("#tab-description").hide();
if(("#tab-description").hide()){
$("#tab-additional_information").hide();
$("#tab-description").show();
}
}
});
});
});
</script>
我的代码只能点击一个标签,而另一个标签无法显示。 我尝试了很多方法,但这个应该是最接近的了。 谢谢。