Je veux joindre un div avec tous les éléments de liste individuels. Lorsque je clique sur une balise de liste, le div qui est attaché à ce div particulier doit avoir une propriété CSS display: block et si un div qui est attaché avec un autre élément de liste et a display: block, il doit se convertir en { {X2}} automatiquement.

$(document).ready(function(){
   $('li').on("click",function(){
      $('li').removeClass("active")
      $(this).addClass('active')
    })
})
#tours {
    background-color:white;
    box-shadow: 2px 3px 3px 0px;
    border-top: 1px solid;
    position: absolute;
    width: 80%;
    display: block;
}

#Visa {
    background-color:white;
    box-shadow: 2px 3px 3px 0px;
    border-top: 1px solid;
    position: absolute;
    width: 80%;
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="ul">
  <li class="Tours active"> <a href="#tours"aria-expanded='true'> TOURS </a></li>
  <li class="Visa"> <a href="#visa" aria-expanded="false">VISA</a></li>
  <li class="hotels"> <a href="#hotels" aria-expanded="false">HOTELS</a> </li>
  <li class="flights"> <a href="#flights"aria-expanded='false'>FLIGHTS</a> </li>
</ul>
       
 <div class="content-area">
   <div id="tours">
     <p>Hi ,My name is safiqul islam uzzala,fdflkdfj Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi voluptas illo explicabo vero quis repellat cum odio sapiente. Ad, ipsa.</p>
   <button class="btn btn-primary btn-lg">Try it</button>
 </div>

 <div id="visa">
   <p>Lorem ipsum dolor sit ex illo unde. Earum modi, architecto sit amet libero aspernatur harum!</p>
   <button class="btn btn-secondary btn-lg">try it</button>
 </div>

Avec l'aide de jquery.

2
Ishan Ahmed 30 août 2020 à 19:08

4 réponses

Meilleure réponse

Vous avez besoin d'un moyen de corréler un <li> donné avec un <div> donné à afficher. J'ai fait cela en donnant aux balises <li> un attribut data-id qui correspond à leur attribut id associé à <div>.

Lorsque vous cliquez sur un <li>, il masque toutes les balises <div> dans le content-area, puis extrait le data-id du <li> sur lequel vous avez cliqué pour déterminer l'ID si le <div> à afficher.

$(document).ready(function(){
    $('li').on("click",function(){
        $('li').removeClass("active")
        $(this).addClass('active')

        $('div.content-area div').hide(); // Hide all divs in the content-area
        $('div#' + $(this).attr('data-id')).show(); // Show the corresponding div
    })
})
#tours{
    background-color:white;
    box-shadow: 2px 3px 3px 0px;
    border-top: 1px solid;
    position: absolute;
    width: 80%;
    display: block;
}

#Visa{
    background-color:white;
    box-shadow: 2px 3px 3px 0px;
    border-top: 1px solid;
    position: absolute;
    width: 80%;
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="ul">
    <li data-id="tours" class="Tours active"> <a href="#tours"aria-expanded='true'> TOURS </a></li>
    <li data-id="visa" class="Visa"> <a href="#visa" aria-expanded="false">VISA</a></li>
    <li class="hotels"> <a href="#hotels" aria-expanded="false">HOTELS</a> </li>
    <li class="flights"> <a href="#flights"aria-expanded='false'>FLIGHTS</a> </li>
</ul>
       
<div class="content-area">
    <div id="tours">
        <p>Hi ,My name is safiqul islam uzzala,fdflkdfj Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi voluptas illo explicabo vero quis repellat cum odio sapiente. Ad, ipsa.</p>
        <button class="btn btn-primary btn-lg">Try it</button>
    </div>

    <div id="visa">
        <p>Lorem ipsum dolor sit ex illo unde. Earum modi, architecto sit amet libero aspernatur harum!</p>
        <button class="btn btn-secondary btn-lg">try it</button>
    </div>
</div>
2
kmoser 30 août 2020 à 16:27

Vous devez d'abord ajouter la classe active à votre CSS. De plus, vous avez eu une erreur: l'identifiant #visa a été écrit avec une majuscule et dans le code HTML avec une minuscule. Je vous conseille également d'ajouter une classe à vos identifiants afin de ne pas vous perdre dans le code jQuery à l'avenir. J'ai ajouté la classe modal.

$(document).ready(function(){
   $('li').on("click",function(){

      $('li').removeClass("active");
      $(this).addClass('active');
      
      $('.content-area .modal').removeClass("active");
      $('.content-area .modal').eq($(this).index()).addClass("active");
   })
});
#tours{
    background-color:white;
    box-shadow: 2px 3px 3px 0px;
    border-top: 1px solid;
    position: absolute;
    width: 80%;
    display: none;
   
}

#visa{
    background-color:white;
    box-shadow: 2px 3px 3px 0px;
    border-top: 1px solid;
    position: absolute;
    width: 80%;
    display: none;
   
}

.active {
    display: block!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="ul">
        <li class="Tours active"> <a href="#tours" aria-expanded='true'> TOURS </a></li>
        <li class="Visa"> <a href="#visa" aria-expanded="false">VISA</a></li>
        <li class="hotels"> <a href="#hotels" aria-expanded="false">HOTELS</a> </li>
        <li class="flights"> <a href="#flights"aria-expanded='false'>FLIGHTS</a> </li>


       </ul>
       
 <div class="content-area">
       <div id="tours" class="modal active">
         <p>Hi ,My name is safiqul islam uzzala,fdflkdfj Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi voluptas illo explicabo vero quis repellat cum odio sapiente. Ad, ipsa.</p>
         <button class="btn btn-primary btn-lg">Try it</button>
       </div>

       <div id="visa" class="modal">
         <p>Lorem ipsum dolor sit ex illo unde. Earum modi, architecto sit amet libero aspernatur harum!</p>
         <button class="btn btn-secondary btn-lg">try it</button>
       </div>
     </div>
0
kmoser 1 sept. 2020 à 02:29

J'espère que vous vouliez quelque chose comme ça. Prendre plaisir:

$(document).ready(function(){
  $('li').on("click",function(){
    var a = this.className;
    var b = "#"+a;
    $(".details").css("display", "none");
    $(b).css("display", "block");
  })
})
.details {
    background: #fff;
    box-shadow: 2px 3px 3px 0px;
    border: 1px solid #333;
    position: absolute;
    height: 150px;
    width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="ul">
  <li class="tours"> 
    <a href="#tours">TOURS</a>
  </li>
  <li class="visa"> 
    <a href="#visa">VISA</a>
  </li>
  <li class="hotels"> 
    <a href="#hotels">HOTELS</a> 
  </li>
  <li class="flights"> 
    <a href="#flights">FLIGHTS</a> 
  </li>
</ul>
       
 <div class="content-area">
 
   <div id="tours" class="details">
     <p> This is content of tours...</p>
     <button class="btn btn-primary btn-lg">
       Try it
     </button>
   </div>

   <div id="visa" class="details">
     <p>This is content of visa...</p>
     <button class="btn btn-primary btn-lg">
       Try it
     </button>
   </div>
   
   <div id="hotels" class="details">
     <p>This is content of hotels...</p>
     <button class="btn btn-primary btn-lg">
       Try it
     </button>
   </div>
 
   <div id="flights" class="details">
     <p>This is content of flights...</p>
     <button class="btn btn-primary btn-lg">
       Try it
     </button>
   </div>

</div>
0
Deadpool 30 août 2020 à 16:54

Vous pouvez utiliser un attribut de données sur votre li, appelez-le par exemple data-expand, qui contient le sélecteur du bon div à afficher. Ensuite, pour plus de commodité, j'ai ajouté une classe de content sur tous vos paragraphes qui doivent être basculés entre eux.

Ensuite, vous pouvez faire quelque chose comme ci-dessous:

$(document).ready(function(){
   //initially have all of them hidden (if you want to):
   $(".content").hide();

   $('li').on("click",function(){
      //get the right div to show, hide all others
      var divToExpand = $(this).data('expand');
      $(".content").hide();
      $(divToExpand).show();
      
      //other code you originally had
      $('li').removeClass("active")
      $(this).addClass('active')
   })
})
#tours{
    background-color:white;
    box-shadow: 2px 3px 3px 0px;
    border-top: 1px solid;
    position: absolute;
    width: 80%;
    display: block;
   
}

#visa{
    background-color:white;
    box-shadow: 2px 3px 3px 0px;
    border-top: 1px solid;
    position: absolute;
    width: 80%;
    display: none;
   
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="ul">
        <li class="Tours active" data-expand="#tours"> <a href="#tours"aria-expanded='true'> TOURS </a></li>
        <li class="Visa" data-expand="#visa"> <a href="#visa" aria-expanded="false">VISA</a></li>


       </ul>
       
 <div class="content-area">
       <div class="content" id="tours">
         <p>Hi ,My name is safiqul islam uzzala,fdflkdfj Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi voluptas illo explicabo vero quis repellat cum odio sapiente. Ad, ipsa.</p>
         <button class="btn btn-primary btn-lg">Try it</button>
       </div>

       <div class="content" id="visa">
         <p>Lorem ipsum dolor sit ex illo unde. Earum modi, architecto sit amet libero aspernatur harum!</p>
         <button class="btn btn-secondary btn-lg">try it</button>
       </div>
     </div>
1
Anis R. 30 août 2020 à 16:25