[JAVA] Changez l'écran d'affichage lorsque vous passez la souris sur un onglet avec jQuery

introduction

Cette fois, j'utiliserai jQuery pour décrire comment changer l'affichage sans recharger la page lorsque l'onglet est déplacé.

Image complète

environnement

MacOS 10.15.7 ruby 2.6.5 Ruby on Rails 6.0.0 jquery 3.4.1

Conditions préalables

--JQuery a été installé.

Allons travailler!

① Créez show.html.erb et css.

Tout d'abord, créez à partir de html. Cette fois, écrivez-le dans un fichier appelé show.html.erb.

erb:show.html.erb

<div class="container">
  <%#partie onglet%>
  <ul class='user-nav-bar'>
    <li>
      <a href="#" id="top", class='user-nav active'>
        TOP
      </a>
    </li>
    <li>
      <a href="#" id="post", class='user-nav'>
        POST
      </a>
    </li>
    <li>
      <a href="#" id="favorite", class='user-nav'>
        Bookmark
      </a>
    </li>
    <li>
      <a href="#" id="post", class='user-nav'>
        message
      </a>
    </li>
  </ul>
  <%#Pièce d'affichage%>
  <ul class="pages">
    <li class="page show">
      <div class="change-page">
haut de page
　　　　</div>
    </li>
    <%#Page POST%>
    <li class="page">
      <div class="change-page">
Page de publication
      </div>
    </li>
    <%#Page de signets%>
    <li class="page">
      <div class="change-page">
Page de signets
      </div>
    </li>
    <%#Page de message%>
    <li class="page">
      <div class="change-page">
Page de message
      </div>
    </li>
  </ul>
</div>

Puis SCSS

show.scss

//Sélecteur d'onglet TOP / POST / Bookmark / Message==========================
.user-nav-bar {
  display: flex;
  justify-content: right;
  width: 20vw;
  margin: 0 0 0 1.5vw;
  a {
    color: rgba($color: #ffffff, $alpha: 0.3);
    a:hover {
      color: #00bfff;
    }
  }
  li {
    background-color: rgba($color: #222222, $alpha: 0.4);
    padding: 15px;
    font-size: 2vh;
  }
}
ul.user-nav-bar li .active {
  color: #ffffff;
  text-decoration: none;
}
.user-nav:hover {
  color: #00bfff;
  text-decoration: none;
}

//Écran d'affichage TOP / POST / Bookmark / Message==================================
.pages {
  height: 100vh;
}
.page {
  background-color: rgba($color: #222222, $alpha: 0.4);
  height: auto;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  display: none;
  padding: 1.5vh 1.5vw;
}

.change-page {
  display: flex;
  justify-content: space-around;
  height: 500px;

C'est tout.

Je pense que l'image terminée jusqu'à présent est la suivante.

(2) Rédigez une description pour basculer l'écran vers JavaScript.

Nous décrirons le processus de changement d'écran dans le fichier js lorsque la souris est placée sur l'onglet. Cette fois, nous l'écrirons dans un fichier appelé show.js.

show.js

$(function() {
  // class="user-nav"Récupérez l'élément DOM défini comme et définissez-le avec les onglets de nom de variable.
  let tabs = $(".user-nav");

  //Définissez le changement de classe avec la fonction de nom tabSwitch.
  function tabSwitch() {
    //De toutes les classes actives"active"Supprimer l'élément
    $(".active").removeClass("active");
    //Sur l'onglet sur lequel vous avez cliqué"classe active"Ajouter.
    $(this).addClass("active");
    //Obtenez le numéro d'élément à partir des onglets du tableau et attribuez-le à l'index de variable indiquant sur quel élément (onglet) a été déplacé.
    const index = tabs.index(this);
    //De toutes les classes de page"show"À la classe de page correspondant à l'onglet sur lequel la souris a été déplacée"montrer la classe"Ajouter.
    $(".page").removeClass("show").eq(index).addClass("show");
  }
  //La fonction tabSwitch est appelée lorsque l'onglet est déplacé avec la souris.
  tabs.hover(tabSwitch);
});

C'est tout.

Le formulaire rempli est ici.

la fin

Merci pour votre visite.