タブの切り替えをやりたいです。
jsの部分がうまくいかないです。
何かいい案ありますでしょうか。
よろしくお願いします。
html
1<html> 2<head> 3<title>test</title> 4<link rel="stylesheet" type="text/css" href="test.css" /> 5<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 6</head> 7<body> 8<div class="mail"> 9 <div class="meun"> 10 <div class="link1">a</div> 11 <div class="link2">a</div> 12 <div class="link3">a</div> 13 <div class="link4">a</div> 14 </div> 15 16 <div id="section1">a </div> 17 <div id="section2">a </div> 18 <div id="section3">a </div> 19 <div id="section4">a </div> 20 21</div> 22<script type="text/javascript" src="test.js"></script> 23 24</body> 25</html>
css
1 2.body{ 3} 4 5.mail{ 6 width:996px; 7 margin:0 auto 0 auto !important; 8} 9 10#meun{ 11 display: table-cell; 12} 13 14.link1{ 15 width:249px; 16 height:95px; 17 background:#EBCF01; 18 float: left; 19} 20 21 22.link2{ 23 background:#007DD4; 24 height:95px; 25 width:249px; 26 float: left; 27 28} 29 30 31.link3{ 32 background:#A52B36; 33 height:95px; 34 width:249px; 35 float: left; 36 37} 38 39 40.link4{ 41 background:#7CBB00; 42 height:95px; 43 width:249px; 44 float: left; 45 46} 47 48 49#section1{ 50 background:#EBCF01; 51 width:996px; 52 height:996px; 53 display:block; 54} 55 56#section2{ 57 background:#007DD4; 58 width:996px; 59 height:996px; 60 display:none; 61} 62 63#section3{ 64 background:#A52B36; 65 width:996px; 66 height:996px; 67 display:none; 68} 69 70#section4{ 71 background:#7CBB00; 72 width:996px; 73 height:996px; 74 display:none; 75}
javascript
1var tsgu1=document.getElementById('section1').offsetHeight; 2var tsgu2=document.getElementById('section2').offsetHeight; 3var tsgu3=document.getElementById('section3').offsetHeight; 4var tsgu4=document.getElementById('section4').offsetHeight; 5//上記で高さを取得しておき、後でclass="link*"がクリックされた時にif文で高さが無い場合は 6//CSSのdisplay:none→display:blockするみたいな。やりたい。 7$("section1").click(function() {test();}); 8$("section2").click(function() {test();}); 9$("section3").click(function() {test();}); 10$("section4").click(function() {test();}); 11//上記で関数呼び出して 12$(function test() { 13 if(tagu1==0){document.getElementById("section1").style.display="none";} 14 if(tagu2==0){document.getElementById("section2").style.display="none";} 15 if(tagu3==0){document.getElementById("section3").style.display="none";} 16 if(tagu4==0){document.getElementById("section4").style.display="none";} 17 if(tagu1!=0){document.getElementById("section1").style.display="block";} 18 if(tagu2!=0){document.getElementById("section2").style.display="block";} 19 if(tagu3!=0){document.getElementById("section3").style.display="block";} 20 if(tagu4!=0){document.getElementById("section4").style.display="block";} 21//的な? 22}); 23
無理ですかね...。
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/02/13 06:47