[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME>WEBプログラム覚書>javascript 反転処理1
javascript 反転処理1
タブパネルを自力で実装することになった場合、 ひとつの要素がtrue(表示)の時、 その他の要素をfalse(非表示)にさせる仕組みって どうすればいいんだろうと思って試し書き。
サンプルコード
id="test"内のli要素がクリックされた場合、 クリックされたliの背景は青、その他のliの背景は黒になるように。
Javascript
- onload = function()
- {
- // id="test"内のli要素を取得
- var lis = document.getElementById("test").getElementsByTagName("li");
- for(var i=0; i<lis.length; i++){
- //自分がlisの何番目の要素か
- lis[i].num = i;
- //最初はfalse
- lis[i].flag = false;
- // クリックされた時の処理
- lis[i].onclick = function(){
- turnOver(this.num);
- }
- }
- // li.flagを反転させる
- function turnOver(k){
- for(var i=0; i<lis.length; i++){
- if (i == k) {
- lis[i].flag = true;
- } else {
- lis[i].flag = false;
- }
- }
- cssChange();
- }
- // obj.flagの値によりCSSを変化
- 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 |
コメント