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

mypageTabChange.gif

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. changepreviews.png

(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. mypageTabChange2.gif

the end

Thank you for visiting.

Recommended Posts

Switch the display screen when hovering the tab with jQuery
Display the list in setDetails on the screen with spring-security
Seasonal display with Java switch
[Rails 5] How to display the password change screen when using devise
Display an image on the base64 screen
Change the layout when rotating with onConfigurationChanged
[JQUery] jQuery drop-down menu display when mouse hover
Cursor display when placing objects with ARKit + SceneKit
About the mechanism when displaying the GUI with Docker
Login fails because the redirect URL of the self-login screen is incorrect in spring-security
[No.007] Organization management screen and login process to the organization
Display the list in setDetails on the screen with spring-security
Switch the display screen when hovering the tab with jQuery