JQuery 隐藏和显示标签内容

Question

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

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

如果我点击 <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>

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

谢谢

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

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

检查此 fiddle：https://jsfiddle.net/vne715qx/1/

Answer 3

此代码是最佳的，因为它向您的页面添加了一个点击侦听器而不是多个，而且还使其仅在 href 中以 # 开头的锚点上触发。因此，如果您最终在其中找到一个合适的 link 锚点，它就不会破裂。还为您提供了一种隐藏其他锚点的不同方法，如果您没有特定于它们的 class（您应该有，但以防万一您无法更改 HTML）。

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

Answer 4

您可以执行以下操作，其中您要首先显示的列表 div 将在 flip1 click 中出现，另一个将在 flip2 click 中出现，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>

JQuery 隐藏和显示标签内容

JQuery Hide and Showing Tabs Content

html

jquery

show-hide