suchen

Heim  >  Artikel  >  Web-Frontend  >  jquery implementiert TAB-Wechselcode zum ersten Öffnen einer Webseite mit animierten Effekten_jquery

jquery implementiert TAB-Wechselcode zum ersten Öffnen einer Webseite mit animierten Effekten_jquery

WBOY
WBOYOriginal
2016-05-16 15:40:351328Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jquery den TAB-Umschaltcode zum ersten Öffnen einer Webseite mit animierten Effekten implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein TAB-Code mit animierten Effekten beim ersten Öffnen. Die Animation wird nur angezeigt, wenn Sie zum ersten Mal auf das TAB-Menü klicken Bitte laden Sie den Seiten-Tab-Effekt herunter.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-first-open-flash-style-tab-cha-codes/

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页TAB代码</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style type="text/css">
body,h1,div,ul,li{ margin:0; padding:0;}
li{ list-style:none;}
.demo{ width:300px; margin:30px auto; position:relative;}
.demo li{ float:left; padding:0 15px; cursor:pointer; height:30px; line-height:30px;}
.d-bk{}
.demo li.cur{ background-color:#F00; color:#FFF;}
.demo li.cur .d-bk{ border:1px solid #F00; width:300px; height:150px; background-color:#f1f1f1; position:absolute; left:0; top:30px; color:#333;}
</style>
<script type="text/javascript">
 $(document).ready(function(){
  $(".demo li div").hide();
  $(".demo li").click(function(){
   $(this).addClass("cur").siblings().removeClass("cur");
   $("div.d-bk").slideDown()
   },function(){
   $("div.d-bk").slideUp() 
  })
 })
</script>
</head>
<body>
<ul class="demo">
 <li>
  导航1
 <div class="d-bk">111</div>
 </li>
 <li>
  导航2
 <div class="d-bk">222</div>
 </li>
 <li>
  导航3
 <div class="d-bk">333</div>
 </li>
</ul>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jquery implementiert schöne Navigationsmenü-Mausaufforderungs-Spezialeffekte code_jqueryNächster Artikel：jquery implementiert schöne Navigationsmenü-Mausaufforderungs-Spezialeffekte code_jquery

In Verbindung stehende Artikel

Mehr sehen