Help us understand the problem. What is going on with this article?

タブの切り替え方: JQuery + CSS + html の書き方

More than 3 years have passed since last update.

タブの切り替える方法を実現するために、やり方のメモです。

※普通の場合、html, js, cssはそれぞれのファイルに書きますが、
実際に1つのファイルだけで、確認できるために、html + JQuery + CSS を1つのファイルまとめて書いてみました。

■内容のポイント

  1. CSS でタブの表示
  2. Jqueryタブの切り替え  参考:誰でも出来る!プラグインを使わずにjQueryで実装するタブ切り替え機能!
  3. htmlメソッドを利用して要素配下のHTMLソースを設定
  4. htmlタグ配下のhtml内容設定、表示  参考:要素配下のテキストを取得/設定するには?

headerの部分

1.タブの色を変えるCSS の設定

tabChange.html_(header/css)
<!DOCTYPE html>
<html>
<head>

<style>
.tab{overflow:hidden;}
.tab li{background:#228B22; padding:10px 25px; float:left; margin-right:1px; height:50px;}
.tab li.select{background:#9ACD32;}
.content li{background:#9ACD32; padding:20px;}
.hide {display:none;}
</style>

2.タブを切り替える JQueryの部分。
JQueryを実行できるために、script srcを設定することを忘れないように。

tabChange.html_(header/JQuery_1)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$(function() {
    //クリックしたときのファンクションを指定
    $('.tab li').click(function() {

        //クリックされたタブの番号がindex変数に代入
        var index = $('.tab li').index(this);

        //コンテンツを一度すべて非表示
        $('.content li').css('display','none');

        //クリックされたタブと同じindex番号のコンテンツを表示
        $('.content li').eq(index).css('display','block');

        //一度タブについているクラスselectを消し
        $('.tab li').removeClass('select');

        //クリックされたタブのみにクラスselectをつけ
        $(this).addClass('select')
    });
});

3.scriptで、タブ内の要素は、htmlメソッドを使ってソースを設定します。

tabChange.html_(header/JQuery_2)
$(function() {
var result1 = '';
result1 += '<div class="content1">';
result1 += 'Apple';
result1 += '</div>';
$('#content1').html(result1);

var result2 = '';
result2 += '<div class="content2">';
result2 += 'orange';
result2 += '</div>';
$('#content2').html(result2);

var result3 = '';
result3 += '<div class="content3">';
result3 += 'Spring';
result3 += '</div>';
$('#content3').html(result3);

});
</script>

</head>

bodyの部分

4.実際に表示するhtml の部分です。
contentの部分で、< li id=xxx > で、scriptでhtmlメソッドで設定した番号を指定すれば、ソースを反映します。

tabChange.html_(body)
<body>

<ul class="tab">
    <li class="select">Favorite fruit</li>
    <li>Favorite Color</li>
    <li>Favorite Season</li>
</ul>

<ul class="content">
    <li class =" " id = "content1">
  <li class ="hide" id= "content2" ></li>
    <li class ="hide" id= "content3"></li>
</ul>

</body>
</html

上記4つのパーツを組み合わせれば、OK~~!


実際に conetent をもっと複雑な内容を表現したいですが、
まず、タブの変換ができまして、満足しました... ^^"

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away