使用JQuery快速高效制作网页交互特效第七章课后_$("#nav .navsbox .firstnav").(6)(function()-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44269168/article/details/94328696

该篇博客主要讲解如何利用JQuery创建网页交互特效，通过CSS样式实现导航栏的美化。课程内容包括设置全局样式、定义导航栏容器样式、一级导航项样式以及展开状态下导航项的背景图片和颜色变化。代码部分未展示，但可以预期涉及JQuery的选择器和事件操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

课后四
样式：
*{
margin: 0px;
padding: 0px;
font-size: 12px;
}
#nav .navsBox{
width: 160px;
}
#nav .navsBox .firstNav{
height:45px;
line-height:45px;
background-color:#EBEBEB;
border-left:10px solid #FE705C;
padding-left:20px;
width:130px;
font-weight:bold;
cursor: pointer;
}
#nav .navsBox ul{
display:none;
list-style:none;
}
#nav .navsBox ul li{
display:block;
height:45px;
line-height:45px;
padding-left:70px;
width:90px;
background:#F2F2F2 33px 7px no-repeat;
}

#nav .navsBox ul li.jedh{
background-image:url("…/Image/huan.gif");
}
#nav .navsBox ul li.jlbbyk{
background-image:url("…/Image/you.gif");
}
#nav .navsBox ul li.jwljb{
background-image:url("…/Image/gouwu.gif");
}
#nav .navsBox ul li.mrljb{
background-image:url("…/Image/meiri.gif");
}
#nav .navsBox ul li.vipjtj{
background-image:url("…/Image/zhe.gif");
}
#nav .navsBox ul li.onbg{
background-color:#F9DBD1;
}

#nav .navsBox ul li a{
color:#000;
text-decoration:none;
}

代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>导航特效</title>
	<link href="../css/navs.css" rel="stylesheet"/>

</head>
<body>
<div id="nav"> 
	 <div class="navsBox">
	 	<div class="firstNav">购物特权</div> 
		<ul>
			<li class="jedh"><a href="#">全额兑换</a></li>
			<li class="jlbbyk"><a href="#">俱乐部包邮卡</a></li>
			<li class="jwljb"><a href="#">购物领金币</a></li>
			<li class="mrljb"><a href="#">每日领金币</a></li>
			<li class="vipjtj"><a href="#">VIP阶梯价</a></li>
		</ul>
	 </div> 
</div>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
 		$(".firstNav"). toggle(
				function(){$("ul").show()},
				function(){$("ul").hide()}
		);
		$("li ").mouseover(
				function(){$(this).css("background-color","red");}
		).mouseout(
				function(){$(this).css("background-color","#F2F2F2");}
		)
	})
</script>

</body>
</html>

课后五
样式：

*{
    margin:0px;
    padding:0px;
    font-size:12px;
}

a{
    color:#000;
    text-decoration:none;
}
#menu{
    margin:30px;
    width:188px;
    background-color:#EFFDFA;

}
#menu .top{
    height:40px;
    line-height:40px;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    border:1px solid #93D6C5;
    border-bottom:none;
}
#menu ul.nav{
    list-style:none;

}
#menu ul.nav li{
    display:block;
    height:30px;
    line-height:30px;
    border:1px solid #93D6C5;
    border-top:none;
    padding-left:30px;
    background:url(../Image/point.jpg) no-repeat 15px center;
}
#menu ul.nav li.lastone{
    border:none;
    cursor:pointer;
    background:#fff url(../Image/up.jpg) no-repeat center top;
}
#menu ul.nav li.up{
    background:#fff url(../Image/down.jpg) no-repeat center top;
}
span.icon{
    float:right;
    margin-right:10px;
    margin-top:10px;
}

代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>FAQ列表</title>
	<link href="../css/index.css" rel="stylesheet"/>
</head>
<body>
<div id="menu">
	<div class="top">全部商品详细分类</div>
    <ul class="nav">
        <li><a href="#">尾品汇</a></li>
        <li><a href="#">图书音像数字管</a></li>
        <li><a href="#">美妆个护</a></li>
        <li><a href="#">家具、家纺、家装</a></li>
        <li><a href="#">鞋靴、箱包</a></li>
        <li><a href="#">珠宝装饰</a></li>
        <li><a href="#">手表/眼镜/礼品</a></li>
        <li><a href="#">运动户外</a></li>
        <li><a href="#">食品、茶、酒</a></li>
        <li><a href="#">手机、数码</a></li>
        <li><a href="#">电脑办公</a></li>
        <li class="lastone"></li>
    </ul>
</div>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".lastone").toggle(
				function(){
					$("li:gt(6)").hide();
                    $(this).toggleClass("up").show();
 				},
				function(){
					$("li:gt(6)").show();
					$(this).toggleClass("up").show();
				}
		)
	})
</script>
</body>
</html>