Rumah > Artikel > hujung hadapan web > Bar navigasi halaman utama Qiji palsu DIV+CSS+JS [Contoh kod]_Pertukaran pengalaman

Bar navigasi halaman utama Qiji palsu DIV+CSS+JS [Contoh kod]_Pertukaran pengalaman

WBOYasal: 2016-05-16 12:07:562263semak imbas

Pengarang Zi Shu
Kesan laman utama Keqiji Hari ini seseorang bertanya kepada saya bagaimana saya menulisnya, jadi saya menulis semula pada waktu petang, saya menyusun semula susun aturnya; halaman utama dahulu. Kesannya: http://shanghai.kijiji.cn
Saya cuba untuk tidak menggunakan kaedah position:absolute; kerja di tapak Keqiji ; Saya benar-benar tidak tahu bagaimana ia ditulis pada masa itu;

Salin kod

Kod adalah seperti berikut:

'1');">Acara Popular

Ciri terkini< /a>

Komitmen Perkhidmatan
Kisah kejayaan terkini

" >Cadangan siaran hangat< /li>

Zi Shu00001< /a>

zishu00002< ;/div>

zishu00003

zishu00004

;div id="info5">Zi Mo 00005

div>

Berikut ialah bahagian CSS: CSS masih belum dioptimumkan; Kodnya adalah seperti berikut:

 
/*子鼠 www.zishu.cn*/ 
* {margin:0; padding:0;font-size:12px;font-family:Verdana, Arial, "宋体"; list-style:none;} 
body {background: #FFFFCC;margin:100px 0 0 100px;} 
#info {border:1px solid #FFCC66; padding:30px;background:#f7f7f7;width:500px ;} 
#kjj_tag {width:500px;border-bottom:1px solid #CCC; background:url(taga_c.gif) repeat-x kiri bawah;height:30px;} 
#info1,#info2,#info3,#info4,#info5{ border:1px solid #ccc;border-top:none; padding:10px; latar belakang:#fff; jelas:keduanya;  } 
h4{ font-weight:normal;float:left;border-right:1px solid #fff;} 
.hd {display:none;} 
.sw {display:block;} 
#info li {float:left;} 
#info li a{float:left; paparan:blok; padding:4px 10px 4px 10px; warna:#37572E; text-decoration:none} 
#info li a:hover{ background:#E9FE70; warna:#000} 
#info ul { float:left; jidar atas:-28px; pelapik:5px 0; kedudukan:mutlak} 
#info .ha a{  warna:#FFF} 
#info .ha a:hover{color:#FFF; latar belakang:tiada} 
#info .ha .hc:hover{background:url(tag_d.gif) tiada ulangan tengah bawah; } 
.ha {background:url(taga_a.gif) tiada ulang kiri atas;margin-top:-3px;padding-top:3px;} 
.hb{ background:url(taga_b.gif) no -ulang kanan atas; jidar atas:-3px; padding-top:3px;} 
.hc {background:url(tag_d.gif) tiada ulangan tengah bawah;  ketinggian:17px; warna:#FFF; font-weight:bold} 
 

以下为JS部分：由于javascript对于我来说太难了；所以可能这部分写王的来分写生了；

复制代码代码如下:

 
 var k = Math.floor(Math.random()*5+1);  
 untuk(i=1; i <6; i++){ 
  jika( i==k){ 
   document.getElementById("info"+i).className="sw"; 
   document.getElementById("tag"+i).className="ha"; 
   document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="hb"; 
   document.getElementById("tag"+i).getElementsByTagName("a")[0].className="hc"; 
  } 
  lain{ 
   document.getElementById("info"+i).className="hd"; 
  } 
 } 
fungsi kijijitag(tag){  
 untuk(i=1; i <6; i++) 
 { 
  jika (i==tag) 
 {  
   document.getElementById("info"+i).className="sw"; 
   document.getElementById("tag"+i).className="ha"; 
   document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="hb"; 
   document.getElementById("tag"+i).getElementsByTagName("a")[0].className="hc"; 
  } 
  lain{ 
   document.getElementById("info"+i).className="hd"; 
   document.getElementById("tag"+i).className=""; 
   document.getElementById("tag"+i).getElementsByTagName("h4")[0].className=""; 
   document.getElementById("tag"+i).getElementsByTagName("a")[0].className=""; 
  }  
 } 
} 
 

Im Folgenden sind die vier verwendeten Bilder aufgeführt:

Sehen Sie sich den Effekt an!

<div id="info">
  <div id="kjj_tag"> </div>
  <ul>
    <li id="tag1"><h4><a href="javascript:kijijitag('1');">Beliebte Aktivitäten</a></h4></li>
    <li id="tag2"><h4><a href="javascript:kijijitag('2');">Neueste Funktionen</a></h4></li>
    <li id="tag3"><h4><a href="javascript:kijijitag('3');">Serviceverpflichtung</a></h4></li>
    <li id="tag4"><h4><a href="javascript:kijijitag('4');">Neueste Erfolgsgeschichte</a></h4></li>
    <li id="tag5"><h4><a href="javascript:kijijitag('5');">Heiße Beitragsempfehlung</a></h4></li>
  </ul>
  <div id="info1">
<a href="http://www.zishu.cn" target="blank">Zi Mo 00001</a><a href="http://shanghai.kijiji.cn" target="blank">Gäste versammeln sich in Shanghai</a>
</div>
  <div id="info2">
<a href="http://www.zishu.cn" target="blank">Zi Mo 00002</a><a href="http://beijing.kijiji.cn" target="blank">Wir treffen uns in Peking</a>
</div>
  <div id="info3">
<a href="http://www.zishu.cn" target="blank">Zi Mo 00003</a><a href="http://huhehaote.kijiji.cn" target="blank">Alle Gäste versammelten sich in Hohhot</a>
</div>
  <div id="info4">
<a href="http://www.zishu.cn" target="blank">Zi Mo 00004</a><a href="http://hangzhou.kijiji.cn" target="blank">Alle Gäste versammelten sich in Hangzhou</a>
</div>
  <div id="info5">
<a href="http://www.zishu.cn" target="blank">Zi Mo 00005</a><a href="http://www.kijiji.cn/index.html" target="blank">Keqi-Homepage</a>
</div>
</div>

</a>Zi Shu 25.04.2007

[Strg+A, um alle auszuwählen. Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie es aktualisieren, um es auszuführen

]
Arahan khas:

1 Bahagian CSS tidak begitu jelas kerana saya agak pening semasa menulisnya
2 bahagian masih Ia boleh menjadi lebih diperkemas, tetapi ia mesti disokong oleh CSS;

Kenyataan：

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

Artikel sebelumnya：css disyorkan untuk mencipta pilihan paparan yang dicetuskan tetikus klasikArtikel seterusnya：css disyorkan untuk mencipta pilihan paparan yang dicetuskan tetikus klasik

Artikel berkaitan

Lihat lagi

Bar navigasi halaman utama Qiji palsu DIV+CSS+JS [Contoh kod]_Pertukaran pengalaman

Ciri terkini< /a>

Komitmen Perkhidmatan

Kisah kejayaan terkini

Artikel berkaitan