<!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>
自己本来想敲一遍，但是到最后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(){});
这个少了就不行了哦!
转载请注明原文地址: https://ju.6miu.com/read-970523.html
