Heim > Artikel > Web-Frontend > jQuery implementiert den Effekt der sekundären Tab-Wechsel-Dropdown-Liste mit Verzögerung

jQuery implementiert den Effekt der sekundären Tab-Wechsel-Dropdown-Liste mit Verzögerung

高洛峰Original: 2017-02-08 16:55:121029Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jQuery den Effekt der sekundären Tab-Wechsel-Dropdown-Liste mit Verzögerung implementiert. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:

Dies ist ein Dropdown-Listenmenü mit Verzögerungseffekt basierend auf jQuery und Animationseffekt.

Ein Screenshot des laufenden Effekts lautet wie folgt:

jQuery implementiert den Effekt der sekundären Tab-Wechsel-Dropdown-Liste mit Verzögerung

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>
<style type="text/css">
 *{margin:0;padding:0;}
 body{padding:10px ;}
 #p1{background:#333;height:30px;width:400px;margin:0 0 10px 0;}
 #p1 li { width: 100px; float:left;line-height:30px; background: 333; margin:0 5px;list-style:none; text-align: center;}
 #p1 li a { color:#fff; text-decoration:none;font-size:12px; display:block;}
 #p1 li a:hover { text-decoration:underline;}
 #p1 li span { display: none;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
 <p id="p1">
   <ul id="nav">
    <li>
    <a href="#">menu1</a>
    <span><a href="#">111</a></span>
    </li>
    <li>
    <a href="#">menu2</a>
    <span><a href="#">222</a></span>
    </li>
    <li>
    <a href="#">menu3</a>
    <span><a href="#">CopyRight@</a></span>
    </li>
    </ul>
  </p>
</body>
<script type="text/javascript">
 $(document).ready(function() { 
 $("ul#nav li").hover(function() { //Hover over event on list item
 $(this).find("span").show(200).css({ &#39;background&#39; : &#39;#1376c9&#39;,&#39;display&#39; : &#39;block&#39;}); //Show the subnav
 } , function() { //on hover out...
 $(this).find("span").hide(200); //Hide the subnav
 });
 });
</script>
</html>

Weitere jQuery-Implementierungen Sekundärer Tab-Wechsel mit Verzögerung. Für Artikel zum Dropdown-Listeneffekt beachten Sie bitte 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：jquery implementiert zum ersten Mal einen TAB-Wechselcode zum Öffnen einer Webseite mit animierten EffektenNächster Artikel：jquery implementiert zum ersten Mal einen TAB-Wechselcode zum Öffnen einer Webseite mit animierten Effekten

In Verbindung stehende Artikel

Mehr sehen