JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<div class="select">
  <select id="changeBodyClass">
    <option value="" selected disabled>bodyのクラス</option>
    <option value="home">home</option>
    <option value="vision">vision</option>
    <option value="product">product</option>
    <option value="recruit">recruit</option>
    <option value="contact">contact</option>
    <option value="company">company</option>
    <option value="">--reset--</option>
  </select>
</div>

<nav class="global-nav">
  <ol class="global-nav-list">
    <li class="global-nav-list__item">
      <a href="/" class="global-nav-link is-home">ほーむ</a>
    </li>
    <li class="global-nav-list__item">
      <a href="/vision/" class="global-nav-link is-vision">びじょん</a>
    </li>
    <li class="global-nav-list__item">
      <a href="/product/" class="global-nav-link is-product">せいひん</a>
    </li>
    <li class="global-nav-list__item">
      <a href="/recruit/" class="global-nav-link is-recruit">さいよう</a>
    </li>
    <li class="global-nav-list__item">
      <a href="/contact/" class="global-nav-link is-contact">おといあわせ</a>
    </li>
    <li class="global-nav-list__item">
      <a href="/company/" class="global-nav-link is-company">わがしゃ</a>
    </li>
  </ol>
</nav>

CSS

/* 見た目わかりやすく */body{font-size:32px}a:hover {color: tomato} a:hover:after {content: '："' attr(href) '"'}
/* bodyクラス付け替え用 */.select{margin-bottom: 15px}

/*
bodyにつけたクラスと対応するナビの
マウスイベントを無効にする
*/
.home .is-home,
.vision .is-vision,
.product .is-product,
.recruit .is-recruit,
.contact .is-contact,
.company .is-company {
  pointer-events: none;
}

JavaScript

var body = document.querySelector('body');
var select = document.querySelector('#changeBodyClass');
select.addEventListener('change', function(){
  body.className = '';
  body.classList.add(this.value);
}, false);