リンク押下でタグを書き換えたい
リンクが複数あって、押したリンク文字だけ<span></span>のみにしたいと
思っています。また対応するdivタグのdisplay属性も書き換えたいです。
とりあえず思いついたのは以下の方法なのですが、冗長ですし、
リンクの数が増えた場合に足していくのが大変です。
もっとシンプルに書く方法がないものでしょうか。
ご助言ください。
<html>
<body>
<script>
function change(spanid,divid,menuName){
document.getElementById('menu1').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu1','div1','メニュー1')\">メニュー1</a>";
document.getElementById('div1').style.display="none";
document.getElementById('menu2').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu2','div2','メニュー2')\">メニュー2</a>";
document.getElementById('div2').style.display="none";
document.getElementById('menu3').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu3','div3','メニュー3')\">メニュー3</a>";
document.getElementById('div3').style.display="none";
document.getElementById(spanid).innerHTML = menuName;
document.getElementById(divid).style.display="block";
}
</script>
<ul>
<li><span id="menu1">メニュー1</span></li>
<li><span id="menu2"><a href="javascript:void(0)" onclick="change('menu2','div2','メニュー2')">メニュー2</a></li>
<li><span id="menu3"><a href="javascript:void(0)" onclick="change('menu3','div3','メニュー3')">メニュー3</a></li>
</ul>
<div id="div1">
test1
</div>
<div id="div2" style="display:none">
test2
</div>
<div id="div3" style="display:none">
test3
</div>
</body>
</html>
お礼
子要素を追加しても意味がないんですね。一つ勉強になりました。 ありがとうございます。