{js} getElementByIdとか配列とかの練習。

クリックした箇所と、それ以外の要素の反転・切り替え。
数字をクリックする。一度すべてdisplay:none;にし、クリックした数字だけをdisplay:block;にして表示させる。

111

222

333

<blockquote>
<script type="text/javascript">

function hoge(num){
	var bar = document.getElementById("geho");
	var bar = bar.getElementsByTagName("p");
	
	for(i=0;i <= 2;i++){
		bar[i].className ="noshow";
	}
	
	bar[num].className ="show";
	
}

</script>
<style>
.noshow { display:none;}
.show { display:block;}

</style>
<div id="geho">
<p onclick="hoge(0)">111</p>
<p onclick="hoge(1)">222</p>
<p onclick="hoge(2)">333</p>
</div>
</blockquote>

カテゴリ:

トラックバック(0)

トラックバックURL: http://www.0yen-coding.com/mt-tb.cgi/259

コメントする

あわせて読みたいブログパーツ