Aplicación encadenada de la barra de navegación.
representaciones
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("简化");//将字符内容更改为“简化”
}
});
})
Resumir
Al principio, mi consolaObtener un error de referencia no detectado: $ no está definido error, y luego descubrió que
el orden en el que JavaScript introdujo el archivo jQuery en HTML era incorrecto. La referencia de la biblioteca JQuery debe colocarse delante de la primera referencia <script>, de modo que los siguientes archivos js puedan ejecutarse para identificar $