Rumah > hujung hadapan web > html tutorial > 通过单选钮实现页面的隐藏与显示_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 12:24:28
asal
1361 orang telah melayarinya

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


回复讨论(解决方案)

设一个单击事件,在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>
Salin selepas log masuk
Salin selepas log masuk

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

<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>
Salin selepas log masuk
Salin selepas log masuk


应该一样的道理。放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>
Salin selepas log masuk

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan