[javascript+css] 表示、非表示をワンクリックで切り替える方法

↓オンマウスで文章が切り替わります。

javascriptとCSSで表示、非表示の切り替え。

displayのnoneとblockをjsで切り替える。

CSSで切り替えるからseo的にも良い。

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

function cli1(Num){
for(i=1;i<=3;i++){
document.getElementById("text" + i).className = "noshow";
}
document.getElementById("text" + Num).className = "show";
}

</script>
<p id="text1">javascriptとCSSで表示、非表示の切り替え。</p>
<p id="text2" class="noshow">displayのnoneとblockをjsで切り替える。</p>
<p id="text3" class="noshow">CSSで切り替えるからseo的にも良い。</p>

<p><input type="button" onmouseover="cli1(1)" value="実行1">
<input type="button" onmouseover="cli1(2)" value="実行2">
<input type="button" onmouseover="cli1(3)" value="実行3">