質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.12%

エラーは消えたけど...。

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,553

asakura238

score 48

タブの切り替えをやりたいです。
jsの部分がうまくいかないです。
何かいい案ありますでしょうか。
よろしくお願いします。

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div class="mail">
    <div class="meun">
        <div class="link1">a</div>
        <div class="link2">a</div>
        <div class="link3">a</div>
        <div class="link4">a</div>
    </div>

    <div id="section1">a    </div>
    <div id="section2">a    </div>
    <div id="section3">a    </div>
    <div id="section4">a    </div>

</div>
<script type="text/javascript" src="test.js"></script>

</body>
</html>
.body{
}

.mail{
    width:996px;
    margin:0 auto 0 auto !important;
}

#meun{
    display: table-cell;
}

.link1{
    width:249px;
    height:95px;
    background:#EBCF01;
    float: left;
}


.link2{
    background:#007DD4;
    height:95px;
    width:249px;
    float: left;

}


.link3{
    background:#A52B36;
    height:95px;
    width:249px;
    float: left;

}


.link4{
    background:#7CBB00;
    height:95px;
    width:249px;
    float: left;

}


#section1{
    background:#EBCF01;
    width:996px;
    height:996px;
    display:block;
}

#section2{
    background:#007DD4;
    width:996px;
    height:996px;
    display:none;
}

#section3{
    background:#A52B36;
    width:996px;
    height:996px;
    display:none;
}

#section4{
    background:#7CBB00;
    width:996px;
    height:996px;
    display:none;
}
var tsgu1=document.getElementById('section1').offsetHeight;
var tsgu2=document.getElementById('section2').offsetHeight;
var tsgu3=document.getElementById('section3').offsetHeight;
var tsgu4=document.getElementById('section4').offsetHeight;
//上記で高さを取得しておき、後でclass="link*"がクリックされた時にif文で高さが無い場合は
//CSSのdisplay:none→display:blockするみたいな。やりたい。
$("section1").click(function() {test();});
$("section2").click(function() {test();});
$("section3").click(function() {test();});
$("section4").click(function() {test();});
//上記で関数呼び出して
$(function test() {
        if(tagu1==0){document.getElementById("section1").style.display="none";}
    if(tagu2==0){document.getElementById("section2").style.display="none";}
    if(tagu3==0){document.getElementById("section3").style.display="none";}
    if(tagu4==0){document.getElementById("section4").style.display="none";}
    if(tagu1!=0){document.getElementById("section1").style.display="block";}
    if(tagu2!=0){document.getElementById("section2").style.display="block";}
    if(tagu3!=0){document.getElementById("section3").style.display="block";}
    if(tagu4!=0){document.getElementById("section4").style.display="block";}
//的な?
});

無理ですかね...。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+5

自分で書く場合はこのような感じになります。
show()hide()はdisplayをnoneかそれ以外に切り替えるjQueryのメソッドです。

<div class="mail">
    <ul class="menu">
      <li class="tab link1"><a href="#section1">tab1</a></li>
      <li class="tab link2"><a href="#section2">tab2</a></li>
      <li class="tab link3"><a href="#section3">tab3</a></li>
      <li class="tab link4"><a href="#section4">tab4</a></li>
    </ul>

    <div id="section1" class="tabContent">section1</div>
    <div id="section2" class="tabContent">section2</div>
    <div id="section3" class="tabContent">section3</div>
    <div id="section4" class="tabContent">section4</div>
</div>
.mail{
    width:996px;
    margin:0 auto 0 auto !important;
}
.menu{
  margin: 0;
  padding: 0;
  display: table;
}
.tab {
  width:249px;
  height:95px;
  display: table-cell;
}
.tab > a {
  display: block;
  height: 100%;
}
.link1{
    background:#EBCF01;
}
.link2{
    background:#007DD4;
}
.link3{
    background:#A52B36;
}
.link4{
    background:#7CBB00;
}

.tabContent {
  width:996px;
  height:996px;
}

#section1{
    background:#EBCF01;
}
#section2,
#section3,
#section4 {
  display:none;
}
#section2{
    background:#007DD4;
}
#section3{
    background:#A52B36;
}
#section4{
    background:#7CBB00;
}
var switchTab = function(){
 /* 操作対象の取得 */
  var $tab = $('.tab').find('a'),
    $content = $('.tabContent');

 /* タブ切り替え処理をするための関数 */
  var tabAct = function(tab){
    var $clickTab = $(tab), // クリックしたタブの取得。
        targetId = $clickTab.attr('href'), // クリックしたタブからhref属性を取得
        $target = $(targetId); // 上記IDを元に取得すると、切り替え先のコンテンツが取れる。

    $content.hide(); // 一旦全部のタブコンテンツをを対象に消す操作を実行。
    $target.show(); // 切り替え先のコンテンツを表示する。
  };

 /* イベントとの関連付け */
  $tab.on('click', function(e){
    e.preventDefault();
    tabAct(this);
  });
};

$(function(){
  switchTab(); //実行
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/13 15:47

    ありがとうございます。jQueryの方も勉強しようと思います。

    キャンセル

checkベストアンサー

+3

主な修正点はclassを変えることによって表示を切り替えてるところとJqueryの知識がないので全部素のjavascriptで書いてるところでしょうか?

追記
今更ながらjquery-uiを少し調べてみたんですが・・・
特に理由が(勉強とか)無ければjquery-ui使ったほうがいいですね
業務等での利用なら(手間暇的に)圧倒的だと思います
とはいえ事情が分からないのであえて自分で書いてみるのも間違いではないと思います

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="./css/Sample1.css" />
<script type="text/javascript" src="./js/Sample1.js"></script>
</head>
<body>
<div class="mail">
    <div class="meun">
        <div class="link1" data-link="section1">a</div>
        <div class="link2" data-link="section2">a</div>
        <div class="link3" data-link="section3">a</div>
        <div class="link4" data-link="section4">a</div>
    </div>

    <div id="section1" class="block">a    </div>
    <div id="section2" class="fade">a    </div>
    <div id="section3" class="fade">a    </div>
    <div id="section4" class="fade">a    </div>

</div>

</body>
</html>
//data-link属性を指定されているelementを探し、イベントを貼り付ける
function searchDataLink(n){
        if(n.nodeType==1){
                //呼び出し
                if(!(typeof n.dataset.link==="undefined")){
                        n.addEventListener("click",function (){ linkStart(this) },false);
                }
        }
        var children=n.childNodes;
        for(var i=0;i<children.length;i++){
                searchDataLink(children[i]);
        }
        return;
}
//class="block"を探し出し、class="fade"にする
function searchAndHide(){
        var block=document.getElementsByClassName("block");
        for(var i=0;i<block.length;i++){
                block[i].className="fade";
        }
}
//
function linkStart(n){

        searchAndHide();

        //data-link属性に指定されているIDのクラスをblockに書き換える
        var blockElement=n.dataset.link;
        var blockElement=document.getElementById(blockElement);
        blockElement.className="block";
}
//メイン
function main(){

searchDataLink(document.body);


}
window.addEventListener("load",main,false);
.body{
}

.mail{
    width:996px;
    margin:0 auto 0 auto !important;
}

#meun{
    display: table-cell;
}

.link1{
    width:249px;
    height:95px;
    background:#EBCF01;
    float: left;
}


.link2{
    background:#007DD4;
    height:95px;
    width:249px;
    float: left;

}


.link3{
    background:#A52B36;
    height:95px;
    width:249px;
    float: left;

}


.link4{
    background:#7CBB00;
    height:95px;
    width:249px;
    float: left;

}


#section1{
    background:#EBCF01;
    width:996px;
    height:996px;
}

#section2{
    background:#007DD4;
    width:996px;
    height:996px;
}

#section3{
    background:#A52B36;
    width:996px;
    height:996px;
}

#section4{
    background:#7CBB00;
    width:996px;
    height:996px;
}
.mail .fade{
        display:none;
}
.mail .block{
        display:block;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/13 15:43

    ありがとうございます。DOMについてはまだ理解が足りませんが、頑張って勉強したいと思います。

    キャンセル

+3

無理です。

jquery-ui か、w2ui をオススメします。
あなたがやろうとしてるめんどくさい部分をすべてコイツらライブラリが吸収してくれます。

追記

ライブラリを使わずに、敢えて基礎を学ぼうという意思があるならば、、、、、、
面倒くさいからやっぱりライブラリ使って手抜きしましょう。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/13 15:50

    ありがとうございます。w2uiはまったく知らないので、調べてみたいと思います。

    キャンセル

+3

jQuery UI の tabs() 使うのでは駄目なのですか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/13 15:49

    ありがとうございます。楽な方法もあるのですね。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる