J'ai ce code où, lorsque vous survolez la balise de lien .cat-link a.navlink ci-dessous, chacun de l'onglet de sous-catégorie .subcategories div s'affichera.

Cela fonctionne bien, mais ce que je veux, c'est masquer tous les onglets. Lorsque je survole un onglet avec la souris et que je veux qu'il s'affiche et que je retire la souris, je veux qu'il se cache.

Le premier onglet s'affiche même après avoir actualisé la page.

Existe-t-il un moyen de masquer ou d'afficher tous les onglets jusqu'à ce que je survole. Merci

const tabBtn = document.querySelectorAll('.category .cat-link .navlink');
const tab = document.querySelectorAll('.subcategories div');

        function tabShow(panelIndex) {
            tab.forEach(function(node) {
                node.style.display = "none";
            });
            tab[panelIndex].style.display = "block";
        }

        tabShow(0);
.subcategories {
    float: left;
    position: relative;
}

.subcategories div {
    width: 100px;
    height: 100px;
    position: absolute;
    background: red;
    display: none;
}
<div class="cat-link">
      <a href="#" onmouseover="tabShow(0)" class="navlink computer">
          <i class="fa fa-tv"></i>
          <span>Computer & Gaming</span>
      </a> 
      <a href="#" onmouseover="tabShow(1)" class="navlink phone">
          <i class="fa fa-mobile-alt"></i>
          <span>Mobiles & Tablets</span>
      </a> 
      <a href="#" onmouseover="tabShow(2)" class="navlink elect">
          <i class="fa fa-computer-speaker"></i>
          <span>Electronics</span>
      </a> 
</div>

<div class="subcategories">
     <div class="computer-sub">
         1
     </div>
     <div class="mobile-sub">
         2
      </div>
     <div class="electronics-sub">
         3
     </div>
</div>
1
brightcode 8 avril 2020 à 01:13

3 réponses

Vous pouvez créer deux classes CSS différentes, l'une avec visibility: hidden; et l'autre avec visibility: visible;. Vous pouvez ajouter / supprimer une classe CSS de n'importe quel élément HTML en utilisant (par exemple) node.classList.add("hidden-node"); et node.classList.remove("show-node");.

0
Naufan Rusyda Faikar 7 avril 2020 à 22:35

Il existe de nombreuses façons de le faire, mais pour rester simple et dans la façon dont vous essayez de le faire, vous pouvez simplement diviser votre fonction tabShow actuelle en 2 fonctions comme tabShow et {{ X2}}, demandez à tabShow d'inclure uniquement la ligne de code qui affichera réellement votre contenu:

function tabShow(panelIndex) {
    tab[panelIndex].style.display = "block";
}

Et tabHide pour cacher vos affaires:

function tabHide(panelIndex) {
    tab.forEach(function(node) {
        node.style.display = "none";
    });
}

Et n'oubliez pas de supprimer tabShow(0); de votre JS!

Ajoutez ensuite onmouseout="tabHide()" à chaque onmouseover="tabShow(x)" que vous avez.

Voici un extrait de travail:

const tabBtn = document.querySelectorAll('.category .cat-link .navlink');
const tab = document.querySelectorAll('.subcategories div');

        function tabShow(panelIndex) {
            tab[panelIndex].style.display = "block";
        }
        function tabHide(panelIndex) {
            tab.forEach(function(node) {
                node.style.display = "none";
            });
        }
.subcategories {
    float: left;
    position: relative;
}

.subcategories div {
    width: 100px;
    height: 100px;
    position: absolute;
    background: red;
    display: none;
}
<div class="cat-link">
      <a href="#" onmouseover="tabShow(0)" onmouseout="tabHide()" class="navlink computer">
          <i class="fa fa-tv"></i>
          <span>Computer & Gaming</span>
      </a> 
      <a href="#" onmouseover="tabShow(1)" onmouseout="tabHide()" class="navlink phone">
          <i class="fa fa-mobile-alt"></i>
          <span>Mobiles & Tablets</span>
      </a> 
      <a href="#" onmouseover="tabShow(2)" onmouseout="tabHide()" class="navlink elect">
          <i class="fa fa-computer-speaker"></i>
          <span>Electronics</span>
      </a> 
</div>

<div class="subcategories">
     <div class="computer-sub">
         1
     </div>
     <div class="mobile-sub">
         2
      </div>
     <div class="electronics-sub">
         3
     </div>
</div>
0
Ali Heikal 7 avril 2020 à 22:57

Lorsqu'un élément a display: none;, il n'a pas de boîte englobante, ce qui signifie que vous ne pouvez pas détecter le vol stationnaire.

Essayez plutôt d'utiliser l'opacité.

const tabBtn = document.querySelectorAll('.category .cat-link .navlink');
const tab = document.querySelectorAll('.subcategories div');

function tabShow(panelIndex) {
    tab.forEach(function(node) {
        node.style.opacity = "0";
    });
    tab[panelIndex].style.opacity  = "1";
}

tabShow(0);
0
Souleste 7 avril 2020 à 22:25