Q&A
```###前提・実現したいこと 切り替えたタブの実装で切り替えコンテンツの中身にボタンをつけたいです。 ###発生している問題・エラーメッセージ 切り替えたタブの実装で、タブと切り替えはできたのですが、 切り替えコンテンツの中身が下記のcssでdivに干渉している為ボタン等の設置ができません。 下記のdivにクラス（例.hide）等つけて干渉する回避方法教えてください。 WEB上で見つけたもので実装ためjsの修正の仕方が分かりません。 このソースで変更の仕方教えてください。 ```ここに言語を入力 #tab-box div { display:none; width:790px; margin-bottom:30px; padding:20px; border:1px solid #0066cc; }
###該当のソースコード
html
1 2 3<body> 4 5<div id="tab-box"> 6<ul id="nav" class="clearFix"> 7<li><a href="#tab-01"><img src="images/btn_01.jpg" alt="" /></a></li> 8<li><a href="#tab-02"><img src="images/btn_02.jpg" alt="" /></a></li> 9<li><a href="#tab-03"><img src="images/btn_03.jpg" alt="" /></a></li> 10</ul> 11<div id="tab-01"> 12<p>メニュー1のコンテンツメニュー1のコンテンツメニュー1のコンテンツ</p> 13<div class="link_con"> 14 <div class="link-1"> <a href="#" target="_blank"><img src="images/btn_so1_01.jpg" alt=""/></a> </div> 15 <div class="link-2"><a href="#" target="_blank"><img src="images/btn_so1_02.jpg" alt=""/></a> </div> 16 </div> 17 </div> 18 19<div id="tab-02"> 20<p>メニュー2のコンテンツメニュー2のコンテンツメニュー2のコンテンツ</p> 21</div> 22<div id="tab-03"> 23<p>メニュー3のコンテンツメニュー3のコンテンツメニュー3のコンテンツ</p> 24</div> 25 26</div> 27 28 29</body> 30
CSS
1 2 3 4*{margin:0;padding:0;} 5body{padding:10px;} 6 7 8#tab-box{ 9 margin: 33px auto 0; 10 width: 790px; 11} 12 13#tab-box ul { 14width:711px; 15margin:0 auto; 16padding: 0; 17list-style: none; 18} 19#tab-box ul li { 20margin-right:3px; 21float:left; 22display:inline; 23font-size:0; 24} 25#tab-box ul li a img{ 26outline:none; 27border:none; 28} 29#tab-box div { 30display:none; 31width:790px; 32margin-bottom:30px; 33padding:20px; 34border:1px solid #0066cc; 35} 36.clearFix:after{ 37display:block; 38clear:both; 39height:0; 40visibility:hidden; 41content:"."; 42zoom:1; 43} 44 45/* link */ 46div.link_con{ 47 width: 400px; 48 margin: 0 auto; 49 display: block; 50 51} 52.link_con.link-1{ 53 width: 200px; 54 float: left; 55 56} 57.link_con.link-2{ 58 width: 200px; 59 float: left; 60 61} 62 63
js
1 2 3 4$(function(){ 5 var handler = $('ul#nav li a'); 6 // ウィンドウを開いた時のタブの位置 7 var url = document.URL; 8 var urlId = url.substr(url.lastIndexOf('#')); 9 var urlIdJudgment = urlId.lastIndexOf('#'); 10 $('ul#nav').each(function(){ 11 $('#tab-box > div:first').show(); 12 var imgSrc = $('ul#nav li:first img').attr('src'); 13 var imgDot = imgSrc.lastIndexOf('.'); 14 var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4); 15 $('ul#nav li:first img').attr('src',onSrc).addClass('tab-on'); 16 }); 17 // クリック時の動作 18 handler.click(function() { 19 // クリックしたタブ画像をオンの状態に 20 var imgSrc = $(this).children('img').attr('src').replace(/_o/g, ""); 21 var imgDot = imgSrc.lastIndexOf('.'); 22 var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4); 23 $(this).children('img').attr('src',onSrc); 24 // タブ画像の切り替え 25 var imgOff = $('ul#nav li img.tab-on').attr('src').replace(/_o/g, ""); 26 $('ul#nav li img.tab-on').attr('src',imgOff); 27 $('ul#nav li img').removeClass('tab-on'); 28 $(this).children('img').addClass('tab-on'); 29 // コンテンツの切り替え 30 var clickAttr = $(this).attr('href'); 31 var showAttr = '#' + $('#tab-box > div:visible').attr('id'); 32 if(clickAttr !== showAttr) { 33 $('#tab-box > div:visible').hide(); 34 var showDiv = '#tab-box div' + clickAttr; 35 $(showDiv).show(); 36 return false; 37 } 38 else { 39 // 何度もクリックした場合もタブ画像をオンの状態に 40 var imgSrc = $(this).children('img').attr('src').replace(/_o/g, ""); 41 var imgDot = imgSrc.lastIndexOf('.'); 42 var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4); 43 $(this).children('img').attr('src',onSrc); 44 return false; 45 } 46 }) 47 // ロールオーバー 48 handler.hover(function() { 49 var classJudgment = $(this).children('img').attr('class'); 50 if(classJudgment != 'tab-on') { 51 var imgSrc = $(this).children('img').attr('src'); 52 var imgDot = imgSrc.lastIndexOf('.'); 53 var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4); 54 $(this).children('img').attr('src',onSrc); 55 } 56 }, function() { 57 var classJudgment = $(this).children('img').attr('class'); 58 if(classJudgment != 'tab-on') { 59 var imgOff = $(this).children('img').attr('src').replace(/_o/g, ""); 60 $(this).children('img').attr('src',imgOff); 61 } 62 }); 63});
###試したこと
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
```###前提・実現したいこと 切り替えたタブの実装で切り替えコンテンツの中身にボタンをつけたいです。 ###発生している問題・エラーメッセージ 切り替えたタブの実装で、タブと切り替えはできたのですが、 切り替えコンテンツの中身が下記のcssでdivに干渉している為ボタン等の設置ができません。 下記のdivにクラス（例.hide）等つけて干渉する回避方法教えてください。 WEB上で見つけたもので実装ためjsの修正の仕方が分かりません。 このソースで変更の仕方教えてください。 ```ここに言語を入力 #tab-box div { display:none; width:790px; margin-bottom:30px; padding:20px; border:1px solid #0066cc; }
###該当のソースコード
html
1 2 3<body> 4 5<div id="tab-box"> 6<ul id="nav" class="clearFix"> 7<li><a href="#tab-01"><img src="images/btn_01.jpg" alt="" /></a></li> 8<li><a href="#tab-02"><img src="images/btn_02.jpg" alt="" /></a></li> 9<li><a href="#tab-03"><img src="images/btn_03.jpg" alt="" /></a></li> 10</ul> 11<div id="tab-01"> 12<p>メニュー1のコンテンツメニュー1のコンテンツメニュー1のコンテンツ</p> 13<div class="link_con"> 14 <div class="link-1"> <a href="#" target="_blank"><img src="images/btn_so1_01.jpg" alt=""/></a> </div> 15 <div class="link-2"><a href="#" target="_blank"><img src="images/btn_so1_02.jpg" alt=""/></a> </div> 16 </div> 17 </div> 18 19<div id="tab-02"> 20<p>メニュー2のコンテンツメニュー2のコンテンツメニュー2のコンテンツ</p> 21</div> 22<div id="tab-03"> 23<p>メニュー3のコンテンツメニュー3のコンテンツメニュー3のコンテンツ</p> 24</div> 25 26</div> 27 28 29</body> 30
CSS
1 2 3 4*{margin:0;padding:0;} 5body{padding:10px;} 6 7 8#tab-box{ 9 margin: 33px auto 0; 10 width: 790px; 11} 12 13#tab-box ul { 14width:711px; 15margin:0 auto; 16padding: 0; 17list-style: none; 18} 19#tab-box ul li { 20margin-right:3px; 21float:left; 22display:inline; 23font-size:0; 24} 25#tab-box ul li a img{ 26outline:none; 27border:none; 28} 29#tab-box div { 30display:none; 31width:790px; 32margin-bottom:30px; 33padding:20px; 34border:1px solid #0066cc; 35} 36.clearFix:after{ 37display:block; 38clear:both; 39height:0; 40visibility:hidden; 41content:"."; 42zoom:1; 43} 44 45/* link */ 46div.link_con{ 47 width: 480px; 48 margin: 0 auto; 49 display: block; 50 51} 52.link_con.link-1{ 53 width: 206px; 54 float: left; 55 56} 57.link_con.link-2{ 58 width: 206px; 59 float: left; 60 61} 62 63
js
1 2 3 4$(function(){ 5 var handler = $('ul#nav li a'); 6 // ウィンドウを開いた時のタブの位置 7 var url = document.URL; 8 var urlId = url.substr(url.lastIndexOf('#')); 9 var urlIdJudgment = urlId.lastIndexOf('#'); 10 $('ul#nav').each(function(){ 11 $('#tab-box > div:first').show(); 12 var imgSrc = $('ul#nav li:first img').attr('src'); 13 var imgDot = imgSrc.lastIndexOf('.'); 14 var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4); 15 $('ul#nav li:first img').attr('src',onSrc).addClass('tab-on'); 16 }); 17 // クリック時の動作 18 handler.click(function() { 19 // クリックしたタブ画像をオンの状態に 20 var imgSrc = $(this).children('img').attr('src').replace(/_o/g, ""); 21 var imgDot = imgSrc.lastIndexOf('.'); 22 var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4); 23 $(this).children('img').attr('src',onSrc); 24 // タブ画像の切り替え 25 var imgOff = $('ul#nav li img.tab-on').attr('src').replace(/_o/g, ""); 26 $('ul#nav li img.tab-on').attr('src',imgOff); 27 $('ul#nav li img').removeClass('tab-on'); 28 $(this).children('img').addClass('tab-on'); 29 // コンテンツの切り替え 30 var clickAttr = $(this).attr('href'); 31 var showAttr = '#' + $('#tab-box > div:visible').attr('id'); 32 if(clickAttr !== showAttr) { 33 $('#tab-box > div:visible').hide(); 34 var showDiv = '#tab-box div' + clickAttr; 35 $(showDiv).show(); 36 return false; 37 } 38 else { 39 // 何度もクリックした場合もタブ画像をオンの状態に 40 var imgSrc = $(this).children('img').attr('src').replace(/_o/g, ""); 41 var imgDot = imgSrc.lastIndexOf('.'); 42 var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4); 43 $(this).children('img').attr('src',onSrc); 44 return false; 45 } 46 }) 47 // ロールオーバー 48 handler.hover(function() { 49 var classJudgment = $(this).children('img').attr('class'); 50 if(classJudgment != 'tab-on') { 51 var imgSrc = $(this).children('img').attr('src'); 52 var imgDot = imgSrc.lastIndexOf('.'); 53 var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4); 54 $(this).children('img').attr('src',onSrc); 55 } 56 }, function() { 57 var classJudgment = $(this).children('img').attr('class'); 58 if(classJudgment != 'tab-on') { 59 var imgOff = $(this).children('img').attr('src').replace(/_o/g, ""); 60 $(this).children('img').attr('src',imgOff); 61 } 62 }); 63});
###試したこと
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
回答1件
0
ベストアンサー
こんにちは。
コンテンツの中身に影響は及ぼしたくないとのことなので
問題個所としてすでに見つけていらっしゃる
css
1#tab-box div {}
を
css
1#tab-box > div {}
に変更すれば一番楽かと。
どうしてもクラスの表示非表示で対応したいようでしたらjsを1から作ったほうが楽だと思います。
投稿2018/01/09 08:43
総合スコア299
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。