search
LoginSignup
2
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

jQueryとCSSでタブ切り替え

今回作ったもの

ezgif.com-video-to-gif.gif

今回はCSSのクラスを付け替えることで
この処理を実現しています。

ソースコード

html
<div>
    <ul class="nav-tab">
        <li class="active">今食べたい物</li>
        <li>今欲しい物</li>
        <li>今行きたい所</li>
    </ul>
</div>
<div id="contents">
    <ul class="show">
        <li>ラーメン</li>
        <li>親子丼</li>
        <li>海鮮丼</li>
    </ul>
    <ul>
        <li>時計</li>
        <li></li>
        <li>イヤホン</li>
    </ul>
    <ul>
        <li>アメリカ</li>
        <li>南国</li>
        <li>ゴリラ</li>
    </ul>
</div>
javascript
$(function() {
 $('.nav-tab > li').on('click',function(){
        $('.nav-tab > li').removeClass('active')
        $(this).addClass('active')

        var index = $('.nav-tab > li').index(this);
        $('#contents > ul').removeClass('show'); 
        $('#contents > ul').eq(index).addClass('show'); 
    });
});
css
.nav-tab {
    margin-top: 30px;
    border-bottom: 3px solid #000099;
}

.nav-tab li {
    color: #000099;
    cursor: pointer;
    display: inline;
    margin-right: 10px;
    font-size: 40px;
}

.nav-tab li.active {
    color: #fff;
    background: #000099;
    cursor: auto;
}

#contents > ul {
    display: none;
}

#contents > ul.show {
    display: block;
}

一応 Controller も記しておきます。C#です。

Controller
using Microsoft.AspNetCore.Mvc;

namespace tabTest.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

解説

HTML

html
<div>
    <ul class="nav-tab"><li class="active">今食べたい物</li><li>今欲しい物</li>
        <li>今行きたい所</li>
    </ul>
</div>
<div id="contents"><ul class="show"><li>ラーメン</li>
        <li>親子丼</li>
        <li>海鮮丼</li>
    </ul>
    <ul>
        <li>時計</li>
        <li></li>
        <li>イヤホン</li>
    </ul>
    <ul>
        <li>アメリカ</li>
        <li>南国</li>
        <li>ゴリラ</li>
    </ul>
</div>

ulタグとliタグでタブの部分のリストを実現させる。classはタブ全体にCSSを適応させるために使用。
②classはCSSを適用させることで、タブを活性化させるために使用している。
③idはタブごとの内容を切り替える際に使用している。
④classはCSSを適用させることで、タブごとの内容を切り替えている。

JavaScript

javascript
$(function() {
 $('.nav-tab > li').on('click',function(){               
        $('.nav-tab > li').removeClass('active')         
        $(this).addClass('active')                       

        var index = $('.nav-tab > li').index(this);      
        $('#contents > ul').removeClass('show');         
        $('#contents > ul').eq(index).addClass('show');  
    });
});

① nav-tavクラス直下のliタグがクリックされた時に、処理される。
② nav-tavクラス直下のliタグのactiveクラスを外す。
③ クリックした部分にactiveクラスをつける。
④ index に クリックしたtab直下のliタグの番号を格納する。
⑤ contents直下のulタグのshowクラスを外す。
⑥ indexに格納された順番と一致する、contents直下のulタグにshowクラスをつける。

CSS

css
.nav-tab {
    margin-top: 30px;
    border-bottom: 3px solid #000099;
}

.nav-tab li {
    color: #000099;
    cursor: pointer;
    display: inline;
    margin-right: 10px;
    font-size: 40px;
}

.nav-tab li.active {          
    color: #fff;
    background: #000099;
    cursor: auto;
}

#contents > ul {             
    display: none;
}

#contents > ul.show {        
    display: block;
}

CSSは重要な所だけ解説します。

①activeタグが適用されているタブはこの内容が追加される。
②contents直下のulは全て、見えないようになっている。
③contents直下のulのshowクラスは見えるように設定される。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2
Help us understand the problem. What are the problem?