2007年06月01日 11:15

表示内容の切り替え(JavaScript)

| http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/361

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>

実行結果

SW1
SW2

これはSW1のエリアです。上記SW2をクリックすると消えます。

内容も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>

実行結果

切り替え
元に戻す

上記「切り替え」をクリックすると、ここの内容が切り替わります。

WebクリエイティブのためのDOM Scripting （Web Designing Books）

著者 : 中村享介 / 金額 : ￥ 2,310

表示内容の切り替え(JavaScript)タグ:

トラックバック

  • http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/361
コメント (0)
コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)





この情報を登録しますか?


先月アクセスが多かったページ