[JAVA] Wechseln Sie den Bildschirm, wenn Sie mit jQuery über eine Registerkarte fahren

Einführung

Dieses Mal werde ich jQuery verwenden, um zu beschreiben, wie die Anzeige umgeschaltet wird, ohne die Seite neu zu laden, wenn die Registerkarte mit der Maus darüber bewegt wird.

Vollständiges Bild

Umgebung

MacOS 10.15.7 ruby 2.6.5 Ruby on Rails 6.0.0 jquery 3.4.1

Voraussetzungen

--JQuery wurde installiert.

Lass uns arbeiten!

① Erstellen Sie show.html.erb und css.

Erstellen Sie zunächst aus HTML. Dieses Mal schreiben Sie es in eine Datei namens show.html.erb.

erb:show.html.erb

<div class="container">
  <%#Tab-Teil%>
  <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>
  <%#Teil anzeigen%>
  <ul class="pages">
    <li class="page show">
      <div class="change-page">
oberste Seite
　　　　</div>
    </li>
    <%#POST-Seite%>
    <li class="page">
      <div class="change-page">
Post Seite
      </div>
    </li>
    <%#Lesezeichenseite%>
    <li class="page">
      <div class="change-page">
Lesezeichenseite
      </div>
    </li>
    <%#Nachrichtenseite%>
    <li class="page">
      <div class="change-page">
Nachrichtenseite
      </div>
    </li>
  </ul>
</div>

Dann SCSS

show.scss

//Auswahl der Registerkarte TOP / POST / Lesezeichen / Nachricht==========================
.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;
}

//Anzeigebildschirm TOP / POST / Lesezeichen / Nachricht==================================
.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;

Das ist alles.

Ich denke, das fertige Bild ist bisher wie folgt.

(2) Schreiben Sie eine Beschreibung, um den Bildschirm auf JavaScript umzustellen.

Wir werden den Vorgang des Wechselns der Bildschirme in der js-Datei beschreiben, wenn die Maus auf der Registerkarte platziert wird. Dieses Mal werden wir es in eine Datei namens show.js schreiben.

show.js

$(function() {
  // class="user-nav"Rufen Sie das DOM-Element ab, das als festgelegt ist, und definieren Sie es mit den Registerkarten für den Variablennamen.
  let tabs = $(".user-nav");

  //Definieren Sie die Klassenumschaltung mit der Funktion name tabSwitch.
  function tabSwitch() {
    //Aus allen aktiven Klassen"active"Löschen Sie das Element
    $(".active").removeClass("active");
    //Auf der Registerkarte haben Sie geklickt"aktive Klasse"Hinzufügen.
    $(this).addClass("active");
    //Rufen Sie die Elementnummer von den Array-Registerkarten ab und weisen Sie sie dem Variablenindex zu, über das das Element (die Registerkarte) bewegt wurde.
    const index = tabs.index(this);
    //Aus allen Seitenklassen"show"Zu der Seitenklasse, die der Registerkarte entspricht, über die die Maus bewegt wurde"Klasse zeigen"Hinzufügen.
    $(".page").removeClass("show").eq(index).addClass("show");
  }
  //Die Funktion tabSwitch wird aufgerufen, wenn die Registerkarte mit der Maus darüber bewegt wird.
  tabs.hover(tabSwitch);
});

Das ist alles.

Das ausgefüllte Formular finden Sie hier.

das Ende

Danke für Ihren Besuch.