JQuery 隐藏和显示选项卡内容

Question

我对 JQuery 隐藏和显示选项卡有疑问

我有 2 个列表，我想显示和隐藏它们，如果我点击 <a href="#tab-description">Description</a> , 那么我想显示 div与 id=tab-description .

如果我点击 <a href="#tab-additional_information">Description</a> , 那么我想显示 div与 id=tab-additional_information .

这是我的 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>

我的代码的结果是只能点击一个标签，而另一个标签无法显示我尝试了很多努力，但我认为这个已经足够接近了

谢谢

Answer 1

试试这个:

 $(document).ready(function(){
    $(".panel").hide();  /*Instead of hiding .panel here you can hide it by using css for first time */
    $("#myTabs li a").click(function(e){
         e.preventDefault();
        var showIt =  $(this).attr('href');
        $(".panel").hide();
        $(showIt).show();           
    })
});