JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSとJavaScriptでマウスホバー時にタブを切り替える方法

CSSとJavaScriptを組み合わせれば、クリック操作なしで「マウスを乗せる（ホバー）」だけでタブを切り替えられるインターフェースを簡単に実装できます。通常のタブ切替では onclick イベントを使いますが、これを onmouseover に置き換えるだけで、ホバー型のタブが完成します。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
.tab {
    float: left;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: 30%;
    height: 300px;
}
.tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    font-size: 17px;
}
.tab button:hover {
    background-color: #ddd;
}
.tab button.active {
    background-color: #ccc;
}
.tabcontent {
    float: left;
    padding: 0px 12px;
    border: 1px solid #ccc;
    width: 70%;
    border-left: none;
    height: 300px;
    display: none;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
</style>
</head>
<body>
<h2>デモ：部署情報タブ</h2>
<p>タブにマウスをホバーすると部署情報が表示されます：</p>
<div class="tab">
<button class="tablinks" onmouseover="demo(event, 'Marketing')">Marketing（マーケティング）</button>
<button class="tablinks" onmouseover="demo(event, 'Operations')">Operations（オペレーション）</button>
<button class="tablinks" onmouseover="demo(event, 'Finance')">Finance（財務）</button>
<button class="tablinks" onmouseover="demo(event, 'IT')">IT</button>
</div>
<div id="Marketing" class="tabcontent">
    <h3>Marketing</h3>
</div>
<div id="Operations" class="tabcontent">
    <h3>Operations</h3>
</div>
<div id="Finance" class="tabcontent">
    <h3>Finance</h3>
</div>
<div id="IT" class="tabcontent">
    <h3>IT</h3>
</div>
<div class="clearfix"></div>
<script>
function demo(e, dept) {
    var i, content, links;
    content = document.getElementsByClassName("tabcontent");
    for (i = 0; i < content.length; i++) {
        content[i].style.display = "none";
    }
    links = document.getElementsByClassName("tablinks");
    for (i = 0; i < links.length; i++) {
        links[i].className = links[i].className.replace(" active", "");
    }
    document.getElementById(dept).style.display = "block";
    e.currentTarget.className += " active";
}
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、次のように表示されます。

CSSとJavaScriptでマウスホバー時にタブを切り替える方法

いずれかのタブにマウスをホバーすると、対応するコンテンツが表示されます。

CSSとJavaScriptでマウスホバー時にタブを切り替える方法

仕組みの解説

この実装のポイントは以下の3点です。

  • CSS側：.tab button:hover でホバー時の背景色を変化させ、.tab button.active で現在選択中のタブを目立たせています。
  • HTML側：各ボタンに onmouseover="demo(event, '部門名')" を設定することで、クリックではなくホバーした瞬間に関数が呼び出されます。
  • JavaScript側：demo() 関数は、まずすべての .tabcontent を非表示にし、全ボタンから active クラスを取り除きます。その後、指定されたIDのコンテンツのみを display: block で表示し、ホバーされたボタンに active クラスを追加します。

このように、イベントを click から mouseover へ変更するだけで、手軽にホバー式のタブUIを実現できます。ただし、スマートフォンやタブレットなどタッチデバイスにはホバー操作が存在しないため、レスポンシブ対応が必要な場合は click イベントとの併用を検討するとよいでしょう。

  1. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini

  2. CSSとJavaScriptでフルページタブを作成する方法【サンプルコード付き】

    CSSとJavaScriptを組み合わせると、クリックしたタブのコンテンツが画面全体に広がって表示される「フルページタブ」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みをわかりやすく解説します。 サンプルコード 以下は、HTML・CSS・JavaScriptだけで作成できるフルページタブの完全なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, i