suchen

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

jquery implementiert zum ersten Mal einen TAB-Wechselcode zum Öffnen einer Webseite mit animierten Effekten

高洛峰
高洛峰Original
2017-02-08 16:51:401080Durchsuche

Dieser Artikel stellt zum ersten Mal die Implementierung des TAB-Umschaltcodes von jquery zum Öffnen einer Webseite mit dynamischen Transformationstechniken zum Steuern von Seitenelementattributen vor Need kann darauf verweisen.

Das Beispiel in diesem Artikel beschreibt, wie jquery den TAB-Umschaltcode zum ersten Mal implementiert, um eine Webseite mit animierten Effekten zu öffnen. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:

Dies ist ein TAB-Code, der beim ersten Öffnen einer Webseite einen Animationseffekt hat. Die Animation wird nur angezeigt, wenn zum ersten Mal auf das TAB-Menü geklickt wird verschwindet, wenn Sie erneut darauf klicken. Es handelt sich um einen praktischen Webseiten-Tab-Effekt. Bitte laden Sie ihn herunter, wenn Sie ihn benötigen.

Ein Screenshot des Laufeffekts lautet wie folgt:

jquery implementiert zum ersten Mal einen TAB-Wechselcode zum Öffnen einer Webseite mit animierten Effekten

Die Online-Demo-Adresse lautet wie folgt:

http://www .php.cn/

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,p,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 p").hide();
  $(".demo li").click(function(){
   $(this).addClass("cur").siblings().removeClass("cur");
   $("p.d-bk").slideDown()
   },function(){
   $("p.d-bk").slideUp() 
  })
 })
</script>
</head>
<body>
<ul class="demo">
 <li>
  导航1
 <p class="d-bk">111</p>
 </li>
 <li>
  导航2
 <p class="d-bk">222</p>
 </li>
 <li>
  导航3
 <p class="d-bk">333</p>
 </li>
</ul>
</body>
</html>

Für weitere JQuery-Implementierung des TAB-Umschaltcodes zum Öffnen einer Webseite mit Wenn Sie zum ersten Mal animierte Effekte verwenden möchten, achten Sie bitte auf die chinesische PHP-Website!


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：Vier Möglichkeiten, den Tab-Wechsel in Javascript zu implementierenNächster Artikel：Vier Möglichkeiten, den Tab-Wechsel in Javascript zu implementieren

In Verbindung stehende Artikel

Mehr sehen