9顶

jquery制作的延迟下拉列表二级tab切换的特效代码

稿源：互联网 2022-04-02 21:38:20 点击： 30236 撤稿纠错

实现移动到第一个a标签，下面第一个div显示1，以此类推，可以移动到下面菜单。继续进行点击。

以下讨论的是和延迟二级列表 jquery相关的jquery制作的延迟下拉列表二级tab切换的特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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 ;}
 #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="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

</head>

<body>

 <div id="div1">
     <ul id="nav">
        <li>
        <a href="#">menu</a>
        <span><a href="http://www.sunflowamedia.com/blog/">1</a></span>
        </li>
        <li>
        <a href="#">menu</a>
        <span><a href="http://www.sunflowamedia.com/blog/">2</a></span>
        </li>
        <li>
        <a href="#">menu</a>
        <span><a href="http://www.sunflowamedia.com/blog/">3</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>

关于jquery制作的延迟下拉列表二级tab切换的特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2012012878173.shtml方便下次再访问哦。

·上一篇： 纯CSS菜单导航特效代码
·下一篇： 一个JS横向左右切换的焦点图特效代码

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

jquery制作的延迟下拉列表二级tab切换的特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻