Solarized
HOME > WEBプログラム覚書 > javascript 反転処理1
javascript 反転処理1
タブパネルを自力で実装することになった場合、
ひとつの要素がtrue(表示)の時、
その他の要素をfalse(非表示)にさせる仕組みって
どうすればいいんだろうと思って試し書き。
サンプルコード
id="test"内のli要素がクリックされた場合、
クリックされたliの背景は青、その他のliの背景は黒になるように。
Javascript
- onload = function()
- {
-
- var lis = document.getElementById("test").getElementsByTagName("li");
-
- for(var i=0; i<lis.length; i++){
-
-
- lis[i].num = i;
-
-
- lis[i].flag = false;
-
-
- lis[i].onclick = function(){
- turnOver(this.num);
- }
- }
-
-
- function turnOver(k){
- for(var i=0; i<lis.length; i++){
- if (i == k) {
- lis[i].flag = true;
- } else {
- lis[i].flag = false;
- }
- }
- cssChange();
- }
-
-
- function cssChange(){
- for(var i=0; i<lis.length; i++){
- if (lis[i].flag) {
- lis[i].style.backgroundColor = "blue";
- } else {
- lis[i].style.backgroundColor = "gray";
- }
- }
- }
-
-
- lis[0].style.backgroundColor = "blue";
- }
HTML
- <ul id="test">
- <li>Menu1</li>
- <li>Menu2</li>
- <li>Menu3</li>
- <li>Menu4</li>
- <li>Menu5</li>
- </ul>
実行結果
- Menu1
- Menu2
- Menu3
- Menu4
- Menu5
とりあえずこんな感じで動くっぽい。
タブパネルを実現するライブラリはたくさんあるので
美しい処理がされているの探してみたいと思います。
| 投稿日 |
2009年1月15日 22:28 |
| カテゴリ |
JavaScript |
| タグ |
サンプルコード |
| トラックバック URL |
http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1150 |
2009年1月29日 17:11
jQueryによるDiv要素の表示、非表示切り替え続きを読む