소개

이번에는 jQuery를 사용하여 tab을 마우스 오버 할 때 페이지를 다시로드하지 않고 표시를 전환하는 방법을 설명합니다.

완성 이미지

환경

MacOS 10.15.7
루비 2.6.5
Ruby on Rails 6.0.0
jquery 3.4.1

전제 조건

jQuery가 도입되었습니다.

그럼 작업하겠습니다!

①show.html.erb와 CSS를 작성한다.

우선은 html로부터 작성합니다. 이번에는 show.html.erb라는 파일에 씁니다.

show.html.erb

<div class="container">
  <%# tab部分 %>
  <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>
  <%# 表示部分 %>
  <ul class="pages">
    <li class="page show">
      <div class="change-page">
        トップページ
　　　　</div>
    </li>
    <%# POSTページ %>
    <li class="page">
      <div class="change-page">
        ポストページ
      </div>
    </li>
    <%# Bookmarkページ %>
    <li class="page">
      <div class="change-page">
        ブックマークページ
      </div>
    </li>
    <%# Messageページ %>
    <li class="page">
      <div class="change-page">
        メッセージページ
      </div>
    </li>
  </ul>
</div>

이어서 SCSS

show.scss

// TOP・POST・Bookmark・Messageのtabセレクター==========================
.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の表示画面==================================
.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;

이상이 됩니다.

여기까지의 완성 이미지는 이하와 같을까 생각합니다.

② JavaScript로 화면을 전환하는 기술을 실시한다.

tab에 마우스를 올려 놓았을 때, 화면을 전환하는 처리를 js 파일에 기술해 갑니다.
이번에는 show.js라는 파일에 쓰겠습니다.

show.js

$(function() {
  // class="user-nav"と設定しているDOM要素を取得してtabsという変数名で定義する。
  let tabs = $(".user-nav");

  // クラス切り替えをtabSwitch関数という名前で定義する。
  function tabSwitch() {
    // 全てのactiveクラスの中から、"active"という要素を削除
    $(".active").removeClass("active");
    // クリックしたタブに"activeクラス"を追加する。
    $(this).addClass("active");
    // 何番目の要素（タブ）がマウスオーバー されたのかを配列tabsから要素番号を取得して、変数indexに代入
    const index = tabs.index(this);
    // 全てのpageクラスから"show"という要素を削除して、マウスオーバーしたタブに対応したpageクラスに"showクラス"を追加する。
    $(".page").removeClass("show").eq(index).addClass("show");
  }
  // タブがマウスオーバーされるとtabSwitch関数が呼び出される。
  tabs.hover(tabSwitch);
});

이상이 됩니다.

완성형은 이쪽이 됩니다.

끝

봐 주셔서 감사합니다.