<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航</title>
<style type="text/css">
#menu{
width: 300px;
}
.chapter{
background: #555;
color: #fff;
cursor: pointer;
}
.highlight{
background: yellow;
color: #000;
}
div{
padding: 0;
}
div a{
background: #583;
color: #fff;
display: none;
float: left;
width: 300px;
}
div span{
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<div id="menu">
<div class="chapter">
<span>第1章-认识jQuery</span>
<a>1.1-JavaScript和JavaScript库</a>
<a>1.2-加入jQuery</a>
<a>1.3-编写简单jQuery代码</a>
<a>1.4-jQuery对象和DOM对象</a>
<a>1.5-解决jQuery和其它库的冲突</a>
<a>1.6-jQuery开发工具和插件</a>
<a>1.7-小结</a>
</div>
<div class="chapter">
<span>第2章-jQuery选择器</span>
<a>2.1-jQuery选择器是什么</a>
<a>2.2-jQuery选择器的优势</a>
<a>2.3-jQuery选择器</a>
<a>2.4-应用jQuery改写示例</a>
<a>2.5-选择器中的一些注意事项</a>
<a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
<a>2.7-还有其它选择器么?</a>
<a>2.8-小结</a>
</div>
<div class="chapter">
<span>第3章-jQuery中的DOM操作</span>
<a>3.1-DOM操作的分类</a>
<a>3.2-jQuery中的DOM操作</a>
<a>3.3-案例研究——某网站超链接和图片提示效果</a>
<a>3.4-小结</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".chapter").click(function(){
$(this).addClass("highlight")
.children("a").show().end()
.siblings().removeClass("highlight")
.children("a").hide();
})
});
</script>
</script>
</body>
<html>
<head>
<meta charset="utf-8">
<title>导航</title>
<style type="text/css">
#menu{
width: 300px;
}
.chapter{
background: #555;
color: #fff;
cursor: pointer;
}
.highlight{
background: yellow;
color: #000;
}
div{
padding: 0;
}
div a{
background: #583;
color: #fff;
display: none;
float: left;
width: 300px;
}
div span{
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<div id="menu">
<div class="chapter">
<span>第1章-认识jQuery</span>
<a>1.1-JavaScript和JavaScript库</a>
<a>1.2-加入jQuery</a>
<a>1.3-编写简单jQuery代码</a>
<a>1.4-jQuery对象和DOM对象</a>
<a>1.5-解决jQuery和其它库的冲突</a>
<a>1.6-jQuery开发工具和插件</a>
<a>1.7-小结</a>
</div>
<div class="chapter">
<span>第2章-jQuery选择器</span>
<a>2.1-jQuery选择器是什么</a>
<a>2.2-jQuery选择器的优势</a>
<a>2.3-jQuery选择器</a>
<a>2.4-应用jQuery改写示例</a>
<a>2.5-选择器中的一些注意事项</a>
<a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
<a>2.7-还有其它选择器么?</a>
<a>2.8-小结</a>
</div>
<div class="chapter">
<span>第3章-jQuery中的DOM操作</span>
<a>3.1-DOM操作的分类</a>
<a>3.2-jQuery中的DOM操作</a>
<a>3.3-案例研究——某网站超链接和图片提示效果</a>
<a>3.4-小结</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".chapter").click(function(){
$(this).addClass("highlight")
.children("a").show().end()
.siblings().removeClass("highlight")
.children("a").hide();
})
});
</script>
</script>
</body>
</html>
自己本来想敲一遍,但是到最后jquery那里还是看了书才明白
所以,还是要多动手啊,不动手都不知道问题在哪里
实际动手,从html开始到一个个div自己做,感觉真的很棒啊!
注意
1.css样式解锁 cursor:point
这个是改变光标的值:从w3s下的代码,有很多样式啊!
Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
2.对float有了新的理解,实际动手,发现float很有趣啊
在这里每一个a标签,有了float=left就自成一行
以前看imooc,说float就是可以围绕图片才设计的
以后float的功能再探索吧
3.第一次用jquery要加入<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
而且要写那个开始的函数 $(document).ready(function(){});
这个少了就不行了哦!