JS でタブ効果を書く

この記事の例では、タブ効果を記述するためのJSの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

<!DOCTYPE html>
<html>
<head lang="ja">
    <メタ文字セット="UTF-8">
    <タイトル></タイトル>
    <スタイル>
        *{
            パディング:0;
            マージン:0;
        }
        .selectka {
            幅:500ピクセル;
            高さ:400px;
            マージン:自動;
            境界線:1px 実線 #09e1ff;
        }
        .左、.右{
            フロート:左;
            高さ:400px;
        }
        ＃メニュー{
            テキスト配置: 中央;
            行の高さ: 80px;
            フォントサイズ: 20px;
            色：紫;
        }
        li{
            リストスタイル: なし;
        }
        #メニュー>li{
            幅:100ピクセル;
            高さ:80px;
            border:1px 破線の青紫;
            ボックスのサイズ: 境界線ボックス;
        }
        。右{
            位置: 相対的;
            幅:399ピクセル;
            背景: ピンク;
            左マージン:1px;
            テキスト配置: 中央;
            フォントサイズ: 100px;
            行の高さ: 400px;

        }

        .right li{
            位置: 絶対;
            幅:399ピクセル;
            高さ:400px;
            表示: なし;
        }
    </スタイル>
</head>
<本文>
<div class="selectka">
    <div class="left">
        <ul id="メニュー">
            <li class="menulist">衣服</li>
            <li class="menulist">美容</li>
            <li class="menulist">バッグ</li>
            <li class="menulist">食べ物</li>
            <li class="menulist">ジュエリー</li>
        </ul>
    </div>
    <div class="right">
        <ul>
            <li class="numlist">衣服</li>
            <li class="numlist">美しさ</li>
            <li class="numlist">バッグ</li>
            <li class="numlist">食べ物</li>
            <li class="numlist">ジュエリー</li>
        </ul>
    </div>
</div>
<スクリプト>
    var menu_list = document.getElementsByClassName("menulist");
    var num_list = document.getElementsByClassName("numlist");
    var moo = null;
    var yuu = null;
        for(var i=0;i<menu_list.length;i++) {
            メニューリスト[i].インデックス = i;
            menu_list[i].onmouseenter = 関数 () {
                /* console.log(this.index);*/ //this.index は現在のターゲットのインデックス値です/* for(var k=0;k<num_list.length;k++){
                    num_list[k].style.display = "なし";
                }
                num_list[this.index].style.display = "ブロック";
            }*/
                if(yuu)yuu.style.background = "なし";
                this.style.background = "黄色";
                ゆう=これ;
                 if(moo)moo.style.display="none";
                num_list[this.index].style.display = "ブロック";
                moo = num_list[this.index];
        }
}
</スクリプト>
</本文>
</html>

効果画像: