点击(此处)折叠或打开
- <!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>jQuery带动画效果的延迟二级tab切换丨亿诚</title>
- <style type=\"text/css\">
- *{margin:0;padding:0;}
- body{padding:10px ;}
- #div1{background:#333;height:30px;width:400px;margin:0 0 10px 0;}
- #div1 li { width: 100px; float:left;line-height:30px; background: 333; margin:0 5px;list-style:none; text-align: center;}
- #div1 li a { color:#fff; text-decoration:none;font-size:12px; display:block;}
- #div1 li a:hover { text-decoration:underline;}
- #div1 li span { display: none;}
- </style>
- <script type=\"text/javascript\" src=\"/images/jquery-1.6.2.min.js\"></script>
- </head>
- <body>
- <div id=\"div1\">
- <ul id=\"nav\">
- <li>
- <a href=\"#\">menu</a>
- <span><a href=\"#\">1</a></span>
- </li>
- <li>
- <a href=\"#\">menu</a>
- <span><a href=\"#\">2</a></span>
- </li>
- <li>
- <a href=\"#\">menu</a>
- <span><a href=\"/\">CopyRight@</a></span>
- </li>
- </ul>
- </div>
- </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({ \'background\' : \'#1376c9\',\'display\' : \'block\'}); //Show the subnav
- } , function() { //on hover out...
- $(this).find(\"span\").hide(200); //Hide the subnav
- });
- });
- </script>
- </html>
- <br>jQuery延时效果的下拉列表菜单,带动画效果,<br>实现移动到第一个a标签,下面第一个div显示1,<br>以此类推,可以移动到下面菜单。继续进行点击。<br><br>第一次运行本代码,请刷新一下本页面先~~<br>所需js文件:<a href=\"/images/jquery-1.6.2.min.js\">jquery-1.6.2.min.js</a><br><hr>
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/29737856/viewspace-1356712/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/29737856/viewspace-1356712/