Chained application of the navigation bar
renderings
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./nav.css" />
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script src="./nav.js" type="text/javascript"></script>
<title>导航栏的链式的应用</title>
</head>
<body>
<div id="divframe">
<div class="clshead">
<h3>图书分类</h3>
<span><img alt="" src="personal.jpg" width="18px;" /></span>
</div>
<div class="clscontent">
<ul>
<li><a href="#">小说</a><i>(1110)</i></li>
<li><a href="#">文艺</a><i>(230)</i></li>
<li><a href="#">青春</a><i>(1430)</i></li>
<li><a href="#">少儿</a><i>(1560)</i></li>
<li><a href="#">生活</a><i>(870)</i></li>
<li><a href="#">社科</a><i>(1460)</i></li>
<li><a href="#">管理</a><i>(1450)</i></li>
<li><a href="#">计算机</a><i>(1780)</i></li>
<li><a href="#">教育</a><i>(930)</i></li>
<li><a href="#">工具书</a><i>(3450)</i></li>
<li><a href="#">引进版</a><i>(980)</i></li>
<li><a href="#">其他</a><i>(3230)</i></li>
</ul>
<div class="clsbot">
<a href="#">简化</a>
<img src="personal.jpg" alt="" width="18px" />
</div>
</div>
</div>
</body>
</html>
css
body{
font-size: 13px;
}
a{
text-decoration: none;
}
#divframe{
border: solid 1px #666;
width: 301px;
overflow: hidden;
}
#divframe .clshead{
background-color: #eee;
padding: 8px;
height: 18px;
cursor: hand;/* 光标是手 */
}
#divframe .clshead h3{
padding: 0px;
margin: 0px;
float: left;
}
#divframe .clshead span{
float: right;
margin-top: 3px;
}
#divframe .clscontent{
padding: 8px;
}
#divframe .clscontent ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
#divframe .clscontent ul li{
float: left;
width: 95px;
height: 23px;
line-height: 23px;
}
#divframe .clsbot{
float: right;
padding-top: 5px;
padding-bottom: 5px;
}
.getfocus{
background-color: #eee;
}
JavaScript
//页面加载事件
$(function(){
//图片单击事件
$(".clshead").click(function(){
if($(".clscontent").is(":visible")){
//如果内容可见
$(".clshead span img").attr("src","kong.png");//改变图片
$(".clscontent").css("display","none");//隐藏内容
}
else{
$(".clshead span img").attr("src","personal.jpg");//改变图片
$(".clscontent").css("display","block");//显示内容
}
});
//热点链接单击事件
$(".clsbot > a").click(function(){
if($(".clsbot > a").text() == "简化"){
//如果内容是“简化”的字
$("ul li:gt(4):not(:last)").hide();//隐藏index号大于4且不是最后一个的元素
$(".clsbot > a").text("更多");//将字符内的内容改成“更多”
}
else{
$("ul li:gt(4):not(:last)").show().addClass("getfocus");//显示所选元素且增加样式
$(".clsbot > a").text("简化");//将字符内容更改为“简化”
}
});
})
Summarize
At the beginning, my consoleGetting Uncaught ReferenceError: $ is not defined error, and then found that
the order in which JavaScript introduced the jQuery file in HTML was wrong. The reference of the JQuery library should be placed in front of the first <script> reference, so that the following js files can be executed in order to identify $