jQuery隐藏和显示选项卡内容

Question

我在 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>

我的代码只能点击一个标签，而另一个标签无法显示。 我尝试了很多方法，但这个应该是最接近的了。 谢谢。

- Haryono Sariputra

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();           
    })
});

- PHP Worm...

---

这里如何给予声望？xD - Haryono Sariputra

Answer 2

$("#tab-additional_information").hide();

$(document).ready(function(){
     $(".tabs").on('click', 'a', function(e){
         e.preventDefault();
         $('#tabs-container .entry-content').hide();
         $($(this).attr("href")).show();
     });
});

请查看此代码示例：https://jsfiddle.net/vne715qx/1/

- Narendra Vaghela

Answer 3

您可以采取以下措施，其中flip1点击时将显示第一个div的列表，flip2点击时将显示另一个列表，而panel1和panel2将是与li相关的代码

   <script type="text/javascript">

    $(document).ready(function () {
        $("#panel2").slideUp("fast")

             $("#flip1").click(function () {

                 $("#panel1").slideToggle("slow");
                 $("#panel2").slideUp("slow");

             });
              $("#flip2").click(function () {

                 $("#panel2").slideToggle("slow");
                 $("#panel1").slideUp("slow");

            });


        });
    </script>

- mugdha

Answer 4

这段代码是最优的，因为它只向您的页面添加一个点击监听器，而不是很多个，并且仅在锚点以#开头的href上触发。因此，如果您最终有一个正确链接的锚点，它也不会出错。此外，如果您没有针对其他锚点的特定类（虽然您应该有），还提供了一种不同的方法来隐藏它们。

$('.tabs li').on('click', 'a[href^="#"]', function(e) { // Apply click listener to anchors that start with '#'
    e.preventDefault();
    var strID;
    $('.tabs li a[href^="#"]').not(this).each(function() { // Get the anchors that haven't been clicked and hide the corresponding div. You can also do this with a blanket class such as $('.panel').hide(), but this assumes that ONLY these items have that class.
        strID = $(this).attr('href'); 
        $(strID).hide();      
    });
    strID = $(this).attr('href'); 
    $(strID).show();      
});

- Jamie Barker