[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME>WEBプログラム覚書>表示内容の切り替え(JavaScript)
表示内容の切り替え(JavaScript)
JavaScriptを使って表示内容を切り替えるサンプル。getElementById()を使って指定IDのオブジェクトにアクセス。
スタイルシート切り替えサンプル
SEO的にはこっちがよさそうですね。
サンプルコード
- <script language="javascript" type="text/javascript">
- <!--
- function Display(no){
- if(no == "no1"){
- document.getElementById("SW1").style.display = "block";
- document.getElementById("SW2").style.display = "none";
- }else if(no == "no2"){
- document.getElementById("SW1").style.display = "none";
- document.getElementById("SW2").style.display = "block";
- }
- }
- -->
- </script>
- <h5><a href="javascript:;" onclick="Display('no1')">SW1</a></h5>
- <h5><a href="javascript:;" onclick="Display('no2')">SW2</a></h5>
- <div id="SW1">
- <p>これはSW1のエリアです。上記SW2をクリックすると消えます。</p>
- </div>
- <div id="SW2" style="display:none;">
- <p>これはSW2のエリアです。上記SW1をクリックすると消えます。</p>
- </div>
内容もJavascriptで切り替えサンプル
サンプル
- <script language="javascript" type="text/javascript">
- function Display_JS(no){
- if(no == "no1"){
- document.getElementById("JS").innerHTML = "<p>「元に戻す」をクリックすると元に戻ります。</p>";
- }else if(no == "no2"){
- document.getElementById("JS").innerHTML = "<p>上記「切り替え」をクリックすると、ここの内容が切り替わります。</p>";
- }
- }
- </script>
- <h5><a href="javascript:;" onclick="Display_JS('no1')">切り替え</a></h5>
- <h5><a href="javascript:;" onclick="Display_JS('no2')">元に戻す</a></h5>
- <div id="JS">
- <p>上記「切り替え」をクリックすると、ここの内容が切り替わります。</p>
- </div>
| 投稿日 | 2007年6月 1日 11:15 |
|---|---|
| カテゴリ | JavaScript |
| タグ | インターフェイス | サンプルコード |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1074 |
musicg
2011年3月 9日 02:00 | 返信
項目を3つに増やすにはどのようなテキストを記載すればよいのでしょうか？