Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencapai kesan penukaran menu tab dengan kemahiran js css_javascript

Bagaimana untuk mencapai kesan penukaran menu tab dengan kemahiran js css_javascript

WBOYasal: 2016-05-16 16:19:041186semak imbas

Contoh dalam artikel ini menerangkan cara untuk mencapai kesan penukaran menu tab dengan js css. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

index.css adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

* { 

jidar: 0px;
padding: 0px; 

} 

badan { 

lebar: 600px;
jidar: 0 auto;
warna latar belakang: perak;
} 

#contanier { 

warna latar belakang: kuning;
lebar: 600px; tinggi: 400px;
} 

#tabNavi { 

lebar: 600px; tinggi: 30px;
warna latar belakang: #00bfff;
hiasan teks: tiada;
Jenis-gaya senarai: tiada 

} 

#tabNavi li { 

terapung: kiri 

margin-kanan: 7px;
Warna latar belakang: #008b8b;
warna: putih;
Kursor: penunjuk;
Lebar: 60px;
Tinggi: 28px; 

Ketinggian garisan: 30px;
Selaraskan teks: tengah 

} 

#kandungan { 

lebar: 600px; tinggi: 370px;
warna latar belakang: putih;
}

index.html adalah seperti berikut: 

Salin kod

 Kod adalah seperti berikut:

JS melaksanakan kesan penukaran dinamik menu tab