首頁 > web前端 > html教學 > 通过单选钮实现页面的隐藏与显示_html/css_WEB-ITnose

通过单选钮实现页面的隐藏与显示_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 12:24:28
原創
1361 人瀏覽過

想通过单选钮实现页面的切换,下面的内容不同,这个怎么实现


回复讨论(解决方案)

设一个单击事件,在javascript里写个函数,当单击时调用,将你所需要隐藏的div的属性设置成隐藏,剩下的不用说了吧。。。

以前用一个复选框没问题,实现了,现在用两个单选钮,实现不了

<script language="JavaScript">function show(i){var ui=document.getElementByld(i);if (i.style.display == "none") {		i.style.display = "";	}else{		i.style.display = "none";	}}	     </script>
登入後複製
登入後複製

以前用一个复选框没问题,实现了,现在用两个单选钮,实现不了

<script language="JavaScript">function show(i){var ui=document.getElementByld(i);if (i.style.display == "none") {		i.style.display = "";	}else{		i.style.display = "none";	}}	     </script>
登入後複製
登入後複製


应该一样的道理。放div 每个放你需要放的内容。然后js控制显示隐藏。

如此就可解决

<script language="JavaScript">function show(){var tc1=document.getElementById("tc01");var tc2=document.getElementById("tc02");var tc3=document.getElementById("tc03");var tc4=document.getElementById("tc04");var dd1=document.getElementById("dd01");var dd2=document.getElementById("dd02");var dd3=document.getElementById("dd03");var dd4=document.getElementById("dd04");tc1.style.display='none';tc2.style.display='none';tc3.style.display='none';tc4.style.display='none';dd1.style.display='';dd2.style.display='';dd3.style.display='';dd4.style.display='';}function taocan(){var tc1=document.getElementById("tc01");var tc2=document.getElementById("tc02");var tc3=document.getElementById("tc03");var tc4=document.getElementById("tc04");var dd1=document.getElementById("dd01");var dd2=document.getElementById("dd02");var dd3=document.getElementById("dd03");var dd4=document.getElementById("dd04");tc1.style.display='';tc2.style.display='';tc3.style.display='';tc4.style.display='';dd1.style.display='none';dd2.style.display='none';dd3.style.display='none';dd4.style.display='none';}   </script>
登入後複製

你用开关符号试试吧,
或者用按钮试试

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板