Switch the display screen when hovering the tab with jQuery

Introduction

This time, I will use jQuery to describe how to switch the display without reloading the page when the mouse is over the tab.

Complete image

environment

MacOS 10.15.7 ruby 2.6.5 Ruby on Rails 6.0.0 jquery 3.4.1

Prerequisites

--JQuery has been installed.

Let's work!

① Create show.html.erb and css.

First, create from html. This time, write it in a file called show.html.erb.

erb:show.html.erb

<div class="container">
  <%#tab part%>
  <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>
  <%#Display part%>
  <ul class="pages">
    <li class="page show">
      <div class="change-page">
top page
　　　　</div>
    </li>
    <%#POST page%>
    <li class="page">
      <div class="change-page">
Post page
      </div>
    </li>
    <%#Bookmark page%>
    <li class="page">
      <div class="change-page">
Bookmark page
      </div>
    </li>
    <%#Message page%>
    <li class="page">
      <div class="change-page">
Message page
      </div>
    </li>
  </ul>
</div>

Then SCSS

show.scss

//TOP / POST / Bookmark / Message tab selector==========================
.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;
}

//TOP / POST / Bookmark / Message display screen==================================
.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;

That is all.

I think the completed image so far is as follows.

(2) Write a description to switch the screen to JavaScript.

When you hover the mouse over the tab, the process of switching the screen will be described in the js file. This time, we will write it in a file called show.js.

show.js

$(function() {
  // class="user-nav"Get the DOM element that is set as and define it with the variable name tabs.
  let tabs = $(".user-nav");

  //Define class switching with the name tabSwitch function.
  function tabSwitch() {
    //From all active classes"active"Delete the element
    $(".active").removeClass("active");
    //On the tab you clicked"active class"To add.
    $(this).addClass("active");
    //Get the element number from the array tabs and assign it to the variable index as to which element (tab) was moused over.
    const index = tabs.index(this);
    //From all page classes"show"To the page class corresponding to the tab you mouse over"show class"To add.
    $(".page").removeClass("show").eq(index).addClass("show");
  }
  //The tabSwitch function is called when the tab is moused over.
  tabs.hover(tabSwitch);
});

That is all.

The completed form is here.

the end

Thank you for visiting.