JQuery Cacher et de Montrer les Onglets de Contenu

J'ai un problème avec le JQuery, le Masquage et l'affichage des onglets

J'ai 2 liste que je veux montrer et cacher,
si je clique sur <a href="#tab-description">Description</a>, alors je veux montrer div avec id=tab-description.

Et si je clique sur <a href="#tab-additional_information">Description</a>, alors je veux montrer div avec id=tab-additional_information.

Voici mon code HTML et Jquery code :

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>

Et Voici mon Code 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>

Le résultat de mon code est juste pouvez cliquer sur un onglet , et de l'autre l'onglet cant montrer
J'ai essayé beaucoup d'effort, mais ce est assez proche je pense

Grâce

InformationsquelleAutor Haryono Sariputra | 2015-06-30
  1. 4

    Essayez ceci:

     $(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();           
    })
});
    • wow , ça fonctionne sir ! merci pour votre aide !
    • comment donner de la réputation ici ? xD
    InformationsquelleAutor PHP Worm...
  2. 3

    vous pouvez effectuer les opérations suivantes, où la liste que vous souhaitez afficher pour la première div viendra dans flip1 cliquez sur et l'autre sera à flip2 cliquez sur, et panel1 et séance 2 sera votre li liées code

       <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>
    InformationsquelleAutor mugdha
  3. 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();
     });
});

    Vérifier ce violon: https://jsfiddle.net/vne715qx/1/

    InformationsquelleAutor Narendra Vaghela
  4. 0

    Ce code est optimal car il ajoute un écouteur de clics vers votre page à la place de de nombreux, mais aussi rend seulement le feu sur des ancres qui commencent par # dans le href. Par conséquent, il ne cassera pas si vous vous retrouvez avec une ancre est un lien. Aussi vous a donné une autre méthode pour cacher d'autres ancres, si vous n'avez pas de classe spécifique pour eux (ce qui devrait être, mais juste au cas où vous ne pouvez pas modifier le 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();      
});
    InformationsquelleAutor Jamie Barker