Javascript mengklik butang untuk mencapai kemahiran effect_javascript penukaran paparan tersembunyi-tutorial js-php.cn

Javascript mengklik butang untuk mencapai kemahiran effect_javascript penukaran paparan tersembunyi

WBOY

Lepaskan： 2016-05-16 15:16:18

asal

1843 orang telah melayarinya

Contoh dalam artikel ini berkongsi kod penukaran untuk menyembunyikan dan memaparkan dengan mengklik butang untuk rujukan anda Kandungan khusus adalah seperti berikut

Rendering:

Dalam banyak aplikasi, terdapat fungsi sedemikian dengan mengklik butang yang sama boleh bertukar antara menunjukkan dan menyembunyikan elemen Berikut ialah contoh kod untuk memperkenalkan cara untuk mencapai kesan ini:

<html>
<head>
<meta charset="gb2312">
<title>隐藏和显示</title>
<style type="text/css">
#thediv
{
 width:200px;
 height:100px;
 line-height:100px;
 text-align:center;
 background-color:green;
}
</style>
<script type="text/javascript">
function Show_Hidden(obj)
{
 if(obj.style.display=="block")
 {
  obj.style.display='none';
 }
 else
 {
  obj.style.display='block';
 }
}
window.onload=function()
{
 var olink=document.getElementById("link");
 var odiv=document.getElementById("thediv");
 olink.onclick=function()
 {
  Show_Hidden(odiv);
  return false;
 }
}
</script>
</head>
<body>
<a href="#" id="link">显示\隐藏切换</a>
<div id="thediv" style="display:block">脚本之家欢迎您</div>
</body>
</html>

Salin selepas log masuk

Kod di atas menyedari keperluan kami Mengklik pada pautan atas boleh bertukar antara memaparkan dan menyembunyikan div. Berikut ialah pengenalan kepada proses pelaksanaannya.
Prinsip pelaksanaan:
Daftarkan pengendali acara onclick untuk pautan Pengendali ini boleh menentukan nilai atribut style.display div Jika ia adalah blok, tetapkannya kepada tiada, yang bermaksud div ditetapkan kepada keadaan tersembunyi , yang bermaksud div ditetapkan kepada tersembunyi Untuk memaparkan status, prinsipnya adalah lebih kurang sama. Apa yang memerlukan perhatian khusus ialah dalam div, tujuan menggunakan style="display:block" adalah untuk membenarkan pernyataan obj.style.display mendapatkan nilai atribut Jika tidak, div tidak boleh ditetapkan untuk disembunyikan pada klik pertama . Anda boleh mengalih keluarnya. Lakukan ujian dengan style="display:block".

Untuk mendapatkan maklumat tentang return false, sila rujuk artikel ini: "Belajar kembali palsu dalam jQuey"

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.