recherche

Maison >interface Web >js tutoriel >jQuery implémente l'effet de la liste déroulante de changement d'onglet secondaire avec délai

jQuery implémente l'effet de la liste déroulante de changement d'onglet secondaire avec délai

高洛峰
高洛峰original
2017-02-08 16:55:121142parcourir

L'exemple de cet article décrit comment jQuery implémente l'effet de la liste déroulante de changement d'onglet secondaire avec un délai. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un menu de liste déroulante avec effet de retard basé sur jQuery, avec effet d'animation.

Une capture d'écran de l'effet en cours d'exécution est la suivante :

jQuery implémente leffet de la liste déroulante de changement donglet secondaire avec délai

Le code spécifique est le suivant : 

<!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>

Plus d'implémentations jQuery changement d'onglet secondaire avec retard Pour les articles liés à l'effet de liste déroulante, veuillez faire attention au site Web PHP chinois !


Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jquery implémente le code de commutation TAB pour ouvrir une page Web avec des effets animés pour la première foisArticle suivant：jquery implémente le code de commutation TAB pour ouvrir une page Web avec des effets animés pour la première fois

Articles Liés

Voir plus