jQuery带动画效果的延迟二级tab切换

最新推荐文章于 2024-06-14 15:02:13 发布

cuikuang6306

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量103

点赞数

文章标签： javascript xhtml ViewUI

点击(此处)折叠或打开

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