More than 3 years have passed since last update.

jQueryでタブをクリックすると内容が変化するタブメニューを実装

Last updated at 2021-07-30Posted at 2021-07-30

css

style.css

.nav {
    width: 100%;
    max-width: 600px;
    height : 50px;
    margin: 0 auto;
}
.nav > li {
    list-style: none;
    float: left;
    width: 33.333%;
    background-color: #CCC;
    text-align: center;
    line-height: 50px;
    color: #FFF;
    font-size: 20px;
    border-right: 2px #FFF solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.nav > li:last-child {
    border-right: none;
}
.is-hidden {
    display: none;
}
.contents {
    width: 100%;
    max-width: 600px;
    padding: 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    border: 2px #CCC solid;
    border-top: none;
}
.contents > li {
    list-style: none;
}

html,jQuery

index.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
    <ul class="nav">
        <li>HOME</li>
        <li>NEWS</li>
        <li>MYPAGE</li>
    </ul>
    <ul class="contents">
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <li class="is-hidden">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
        <li class="is-hidden">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
    </ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
// navの小要素であるliをクリックして、contents内の小要素であるli要素を表示させる。
// .index() 要素のindexを取得。
// .eq() 引数に応じたindexの要素を指定。
// .addClass() クラスを追加。
// .removeClass() クラスを削除。
$(function(){
  $(".nav li").click(function(){//navクラスのliをクリックしたらイベントスタート
    var num = $(this).index();//navクラスのliのインデックス番号を取得
    $(".contents li").addClass("is-hidden");//一旦contentsクラスのliにis-hiddenクラスを追加し、全て非表示にする
    $(".contents li").eq(num).removeClass("is-hidden");//eq()でnavクラスのliのインデックス番号を引数に指定し、
//contentsクラスの同じインデックス番号のliのis-hiddenクラスを削除。これで選択したタブと紐ずく内容だけを表示できる
  })
});
</script>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up