Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@MeganLiu

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

More than 5 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 をもっと複雑な内容を表現したいですが、
まず、タブの変換ができまして、満足しました... ^^"

5
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  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

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?