<div class="tabNav upper"> <div class="tab"> <ul id="year"> <!-- <li class="on"><a href="javascript:void(0)">2017年</a></li> <li><a href="javascript:void(0)">2016年</a></li> <li><a href="javascript:void(0)">2015年</a></li> <li><a href="javascript:void(0)">2014年</a></li> --> <li><a href="javascript:void(0)" onclick="show_block(2017);">2017年</a></li> <li><a href="javascript:void(0)" onclick="show_block(2016);">2016年</a></li> <li><a href="javascript:void(0)" onclick="show_block(2015);">2015年</a></li> <li><a href="javascript:void(0)" onclick="show_block(2014);">2014年</a></li> <select id="changeSelect" onchange="entryChange2();"> <option value="">2013年以前</option> <option value="select2013">2013年</option> <option value="select2012">2012年</option> <option value="select2011">2011年</option> </select> </ul> </div> </div>
上記のようにコードがあり、
Scriptには下記のようなコードがあります。
function
1 2 if(id == '2017'){ 3 console.log(id); 4 //2017年表示 5 document.getElementById('Box2017').style.display = ""; 6 document.getElementById('Box2016').style.display = "none"; 7 document.getElementById('Box2015').style.display = "none"; 8 document.getElementById('Box2014').style.display = "none"; 9 document.getElementById('Box2013').style.display = "none"; 10 document.getElementById('Box2012').style.display = "none"; 11 document.getElementById('Box2011').style.display = "none"; 12 }else if(id == '2016'){ 13 console.log(id); 14 //2016年表示 15 document.getElementById('Box2017').style.display = "none"; 16 document.getElementById('Box2016').style.display = ""; 17 document.getElementById('Box2015').style.display = "none"; 18 document.getElementById('Box2014').style.display = "none"; 19 document.getElementById('Box2013').style.display = "none"; 20 document.getElementById('Box2012').style.display = "none"; 21 document.getElementById('Box2011').style.display = "none"; 22 }else if(id == '2015'){ 23 console.log(id); 24 //2015年表示 25 document.getElementById('Box2017').style.display = "none"; 26 document.getElementById('Box2016').style.display = "none"; 27 document.getElementById('Box2015').style.display = ""; 28 document.getElementById('Box2014').style.display = "none"; 29 document.getElementById('Box2013').style.display = "none"; 30 document.getElementById('Box2012').style.display = "none"; 31 document.getElementById('Box2011').style.display = "none"; 32 }else if(id == '2014'){ 33 console.log(id); 34 //2014年表示 35 document.getElementById('Box2017').style.display = "none"; 36 document.getElementById('Box2016').style.display = "none"; 37 document.getElementById('Box2015').style.display = "none"; 38 document.getElementById('Box2014').style.display = ""; 39 document.getElementById('Box2013').style.display = "none"; 40 document.getElementById('Box2012').style.display = "none"; 41 document.getElementById('Box2011').style.display = "none"; 42 } 43 44}
表示部分は
<table id="Box2017"> <colgroup> <col span="3" class="w33per"> </colgroup> <tbody> <tr> ~略 <talbe>
というのが、2017~2014まであります。
最初のコードの2017年を押すと、最後のコードの'Box2017'のデータが表示など、各ボタン(2017~2014)を押すと、画面を切替で表示したいのですが、liのなかだと、どうもjavascriptがきかないようです。。。
console.logでボタンを押したときのファンクションのデータは取ってこれるのですが、二番目のコードの表示、非表示のところがうまく動作していないようです。
どこが原因かわかりますでしょうか?
回答3件
あなたの回答
tips
プレビュー