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

Answer 2

您可以执行以下操作，其中您要为第一个div显示的列表将以flip1单击进行，另一个将在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>

Answer 3

000     inc instruction

001     dec instruction

010     intra-segment indirect call

011     inter-segment indirect call

100     intra-segment indirect jump

101     inter-segment indirect jump

110     push instruction

111     unused

检查这个小提琴：https://jsfiddle.net/vne715qx/1/

Answer 4

此代码是最佳的，因为它会为您的页面添加一个点击侦听器而不是多个，但也只会触发#中以href开头的锚点。因此，如果你最终得到一个适当的链接锚，它不会破坏。如果你没有特定于它们的类（你应该这样，但是万一你不能改变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();      
});

JQuery隐藏和显示选项卡内容

4 个答案: