标题Web网页实训知识点——0326
用js来实现二级导航栏练习
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0}
#nav{background-color: #ff5e48;width: 600px;height: 20px;margin: 0 auto;}
ul li{list-style: none;float: left;line-height: 20px;text-align: center;position: relative}
a {text-decoration: none;color: #c8e1de;padding: 0 20px;width: 100px}
a:hover{background-color: #669900;color: #eee4cc}
ul li ul{position: absolute;top: 20px;left: 0px}
ul li ul li{float: none;background-color: #f2b179;margin: 1px 0;display: none}
ul li ul li a{padding: 0;}
ul li:hover ul li{display: block}
</style>.
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a>
<ul>
<li><a href="#">web网页战术</a></li>
<li><a href="#">web网页战术</a></li>
<li><a href="#">web网页战术</a></li>
</ul>
</li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">web网页战术</a></li>
<li><a href="#">服务端技术</a></li>
<li><a href="#">python开发</a></li>
</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">web网页战术</a></li>
<li><a href="#">web网页战术</a></li>
<li><a href="#">web网页战术</a></li>
</ul>
</li>
<li><a href="#">经典案例</a>
<ul>
<li><a href="#">web网页战术</a></li>
<li><a href="#">web网页战术</a></li>
<li><a href="#">web网页战术</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">web网页战术</a></li>
<li><a href="#">web网页战术</a></li>
<li><a href="#">web网页战术</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
美元符号“$”定义jQuery
选择器(selector) 查询和查找HTML元素
jQuery的action()执行对元素的操作
代码(基本框架):
<script type="text/javascript">
$(document).ready(function(){
$(".A>a").click(function(){
$(this).addClass("current")
.next.show()
.parent().siblings().childrend("a").removeClass("current")
.next().hide();
return false;
});
});
</script>
<ul class="1">
<li class="2">
<a href="#">a</a>
<ul class="##">
<li><a href="###">*</a></li>
<li><a href="####">**</a></li>
<li><a href="#####">***</a></li>
<li><a href="######">****</a></li>
</ul>
</li>
</ul>