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

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

ただいまの
回答率

90.62%

  • JavaScript

    15867questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6522questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5560questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

切り替えたタブの実装が上手くいかないのでお願いします。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 128

ray_mo

score 1

前提・実現したいこと

切り替えたタブの実装で切り替えコンテンツの中身にボタンをつけたいです。

発生している問題・エラーメッセージ

切り替えたタブの実装で、タブと切り替えはできたのですが、
切り替えコンテンツの中身が下記のcssでdivに干渉している為ボタン等の設置ができません。
下記のdivにクラス(例.hide)等つけて干渉する回避方法教えてください。

WEB上で見つけたもので実装ためjsの修正の仕方が分かりません。
このソースで変更の仕方教えてください。

#tab-box div {
display:none;
width:790px;
margin-bottom:30px;
padding:20px;
border:1px solid #0066cc;
}

該当のソースコード

<body>

<div id="tab-box">
<ul id="nav" class="clearFix">
<li><a href="#tab-01"><img src="images/btn_01.jpg" alt="" /></a></li>
<li><a href="#tab-02"><img src="images/btn_02.jpg" alt="" /></a></li>
<li><a href="#tab-03"><img src="images/btn_03.jpg" alt="" /></a></li>
</ul>
<div id="tab-01">
<p>メニュー1のコンテンツメニュー1のコンテンツメニュー1のコンテンツ</p>
<div class="link_con">
    <div class="link-1"> <a href="#" target="_blank"><img src="images/btn_so1_01.jpg" alt=""/></a> </div>
    <div class="link-2"><a href="#" target="_blank"><img src="images/btn_so1_02.jpg" alt=""/></a> </div>
    </div>
        </div>    

<div id="tab-02">
<p>メニュー2のコンテンツメニュー2のコンテンツメニュー2のコンテンツ</p>
</div>
<div id="tab-03">
<p>メニュー3のコンテンツメニュー3のコンテンツメニュー3のコンテンツ</p>
</div>

</div>    


</body>
*{margin:0;padding:0;}
body{padding:10px;}


#tab-box{
    margin: 33px auto 0;
    width: 790px;
}

#tab-box ul {
width:711px;
margin:0 auto;
padding: 0;
list-style: none;
}
#tab-box ul li {
margin-right:3px;
float:left;
display:inline;
font-size:0;
}
#tab-box ul li a img{
outline:none;
border:none;
}
#tab-box div {
display:none;
width:790px;
margin-bottom:30px;
padding:20px;
border:1px solid #0066cc;
}
.clearFix:after{
display:block;
clear:both;
height:0;
visibility:hidden;
content:".";
zoom:1;
}

/* link */
div.link_con{
    width: 400px;
    margin: 0 auto;
    display: block;

}
.link_con.link-1{
    width: 200px;
    float: left;

}
.link_con.link-2{
    width: 200px;
    float: left;

}
$(function(){
    var handler = $('ul#nav li a');
    // ウィンドウを開いた時のタブの位置
    var url = document.URL;
    var urlId = url.substr(url.lastIndexOf('#'));
    var urlIdJudgment = urlId.lastIndexOf('#');
    $('ul#nav').each(function(){
        $('#tab-box > div:first').show();
            var imgSrc = $('ul#nav li:first img').attr('src');
            var imgDot = imgSrc.lastIndexOf('.');
            var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);
            $('ul#nav li:first img').attr('src',onSrc).addClass('tab-on');
    });
    // クリック時の動作
    handler.click(function() {
        // クリックしたタブ画像をオンの状態に
        var imgSrc = $(this).children('img').attr('src').replace(/_o/g, "");
        var imgDot = imgSrc.lastIndexOf('.');
        var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);
        $(this).children('img').attr('src',onSrc);
        // タブ画像の切り替え
        var imgOff = $('ul#nav li img.tab-on').attr('src').replace(/_o/g, "");
        $('ul#nav li img.tab-on').attr('src',imgOff);
        $('ul#nav li img').removeClass('tab-on');
        $(this).children('img').addClass('tab-on');
        // コンテンツの切り替え
        var clickAttr = $(this).attr('href');
        var showAttr = '#' + $('#tab-box > div:visible').attr('id');
        if(clickAttr !== showAttr) {
            $('#tab-box > div:visible').hide();
            var showDiv = '#tab-box div' + clickAttr;
            $(showDiv).show();
            return false;
        }
        else {
            // 何度もクリックした場合もタブ画像をオンの状態に
            var imgSrc = $(this).children('img').attr('src').replace(/_o/g, "");
            var imgDot = imgSrc.lastIndexOf('.');
            var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);
            $(this).children('img').attr('src',onSrc);
            return false;
        }
    })
    // ロールオーバー
    handler.hover(function() {
        var classJudgment = $(this).children('img').attr('class');
        if(classJudgment != 'tab-on') {
            var imgSrc = $(this).children('img').attr('src');
            var imgDot = imgSrc.lastIndexOf('.');
            var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);
            $(this).children('img').attr('src',onSrc);
        }
    }, function() {
        var classJudgment = $(this).children('img').attr('class');
        if(classJudgment != 'tab-on') {
            var imgOff = $(this).children('img').attr('src').replace(/_o/g, "");
            $(this).children('img').attr('src',imgOff);
        }
    });
});

試したこと

補足情報(言語/FW/ツール等のバージョンなど)

より詳細な情報

前提・実現したいこと

切り替えたタブの実装で切り替えコンテンツの中身にボタンをつけたいです。

発生している問題・エラーメッセージ

切り替えたタブの実装で、タブと切り替えはできたのですが、
切り替えコンテンツの中身が下記のcssでdivに干渉している為ボタン等の設置ができません。
下記のdivにクラス(例.hide)等つけて干渉する回避方法教えてください。

WEB上で見つけたもので実装ためjsの修正の仕方が分かりません。
このソースで変更の仕方教えてください。

#tab-box div {
display:none;
width:790px;
margin-bottom:30px;
padding:20px;
border:1px solid #0066cc;
}

該当のソースコード

<body>

<div id="tab-box">
<ul id="nav" class="clearFix">
<li><a href="#tab-01"><img src="images/btn_01.jpg" alt="" /></a></li>
<li><a href="#tab-02"><img src="images/btn_02.jpg" alt="" /></a></li>
<li><a href="#tab-03"><img src="images/btn_03.jpg" alt="" /></a></li>
</ul>
<div id="tab-01">
<p>メニュー1のコンテンツメニュー1のコンテンツメニュー1のコンテンツ</p>
<div class="link_con">
    <div class="link-1"> <a href="#" target="_blank"><img src="images/btn_so1_01.jpg" alt=""/></a> </div>
    <div class="link-2"><a href="#" target="_blank"><img src="images/btn_so1_02.jpg" alt=""/></a> </div>
    </div>
        </div>    

<div id="tab-02">
<p>メニュー2のコンテンツメニュー2のコンテンツメニュー2のコンテンツ</p>
</div>
<div id="tab-03">
<p>メニュー3のコンテンツメニュー3のコンテンツメニュー3のコンテンツ</p>
</div>

</div>    


</body>
*{margin:0;padding:0;}
body{padding:10px;}


#tab-box{
    margin: 33px auto 0;
    width: 790px;
}

#tab-box ul {
width:711px;
margin:0 auto;
padding: 0;
list-style: none;
}
#tab-box ul li {
margin-right:3px;
float:left;
display:inline;
font-size:0;
}
#tab-box ul li a img{
outline:none;
border:none;
}
#tab-box div {
display:none;
width:790px;
margin-bottom:30px;
padding:20px;
border:1px solid #0066cc;
}
.clearFix:after{
display:block;
clear:both;
height:0;
visibility:hidden;
content:".";
zoom:1;
}

/* link */
div.link_con{
    width: 480px;
    margin: 0 auto;
    display: block;

}
.link_con.link-1{
    width: 206px;
    float: left;

}
.link_con.link-2{
    width: 206px;
    float: left;

}
$(function(){
    var handler = $('ul#nav li a');
    // ウィンドウを開いた時のタブの位置
    var url = document.URL;
    var urlId = url.substr(url.lastIndexOf('#'));
    var urlIdJudgment = urlId.lastIndexOf('#');
    $('ul#nav').each(function(){
        $('#tab-box > div:first').show();
            var imgSrc = $('ul#nav li:first img').attr('src');
            var imgDot = imgSrc.lastIndexOf('.');
            var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);
            $('ul#nav li:first img').attr('src',onSrc).addClass('tab-on');
    });
    // クリック時の動作
    handler.click(function() {
        // クリックしたタブ画像をオンの状態に
        var imgSrc = $(this).children('img').attr('src').replace(/_o/g, "");
        var imgDot = imgSrc.lastIndexOf('.');
        var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);
        $(this).children('img').attr('src',onSrc);
        // タブ画像の切り替え
        var imgOff = $('ul#nav li img.tab-on').attr('src').replace(/_o/g, "");
        $('ul#nav li img.tab-on').attr('src',imgOff);
        $('ul#nav li img').removeClass('tab-on');
        $(this).children('img').addClass('tab-on');
        // コンテンツの切り替え
        var clickAttr = $(this).attr('href');
        var showAttr = '#' + $('#tab-box > div:visible').attr('id');
        if(clickAttr !== showAttr) {
            $('#tab-box > div:visible').hide();
            var showDiv = '#tab-box div' + clickAttr;
            $(showDiv).show();
            return false;
        }
        else {
            // 何度もクリックした場合もタブ画像をオンの状態に
            var imgSrc = $(this).children('img').attr('src').replace(/_o/g, "");
            var imgDot = imgSrc.lastIndexOf('.');
            var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);
            $(this).children('img').attr('src',onSrc);
            return false;
        }
    })
    // ロールオーバー
    handler.hover(function() {
        var classJudgment = $(this).children('img').attr('class');
        if(classJudgment != 'tab-on') {
            var imgSrc = $(this).children('img').attr('src');
            var imgDot = imgSrc.lastIndexOf('.');
            var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);
            $(this).children('img').attr('src',onSrc);
        }
    }, function() {
        var classJudgment = $(this).children('img').attr('class');
        if(classJudgment != 'tab-on') {
            var imgOff = $(this).children('img').attr('src').replace(/_o/g, "");
            $(this).children('img').attr('src',imgOff);
        }
    });
});

試したこと

補足情報(言語/FW/ツール等のバージョンなど)

より詳細な情報

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

こんにちは。

コンテンツの中身に影響は及ぼしたくないとのことなので
問題個所としてすでに見つけていらっしゃる

#tab-box div {}


#tab-box > div {}


に変更すれば一番楽かと。

どうしてもクラスの表示非表示で対応したいようでしたらjsを1から作ったほうが楽だと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15867questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6522questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5560questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。