Code666 (代码贴、代码片段)

[JavaScript] jquery 简易竖式导航栏 addClass() removeClass() →→→→→进入此内容的聊天室

来自 , 2020-11-09, 写在 JavaScript, 查看 106 次.
URL http://www.code666.cn/view/35f4a8d4
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>1-5-1</title>
  6. <style type="text/css">
  7. #menu {
  8.         width:300px;
  9. }
  10. .has_children{
  11.         color :#fff;
  12.         cursor:pointer;
  13.         background-color: #999;
  14. }
  15. .highlight{
  16.         color : #fff;
  17.         background-color: #666;
  18. }
  19. div{
  20.         padding:0;
  21. }
  22. div a{
  23.         display : none;
  24.         float:left;
  25.         width:300px;
  26.         background-color: #FF9;
  27.         color: #333;
  28. }
  29. </style>
  30. <!-- 引入 jQuery -->
  31. <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  32. <script type="text/javascript">
  33. //等待dom元素加载完毕.
  34. $(document).ready(function(){
  35.         $(".has_children").click(function(){
  36.                 $(this).addClass("highlight")                   //为当前元素增加highlight类
  37.                         .children("a").show().end()                     //将子节点的a元素显示出来并重新定位到上次操作的元素
  38.                 .siblings().removeClass("highlight")            //获取元素的兄弟元素，并去掉他们的highlight类
  39.                         .children("a").hide();                          //将兄弟元素下的a元素隐藏
  40.         });
  41. });
  42. </script>
  43. </head>
  44. <body>
  45. <div id="menu">
  46.         <div class="has_children">
  47.                 <span>第1章-认识jQuery</span>
  48.                 <a>1.1-JavaScript和JavaScript库</a>
  49.                 <a>1.2-加入jQuery</a>
  50.                 <a>1.3-编写简单jQuery代码</a>
  51.                 <a>1.4-jQuery对象和DOM对象</a>
  52.                 <a>1.5-解决jQuery和其它库的冲突</a>
  53.                 <a>1.6-jQuery开发工具和插件</a>
  54.                 <a>1.7-小结</a>
  55.         </div>
  56.         <div class="has_children">
  57.                 <span>第2章-jQuery选择器</span>
  58.                 <a>2.1-jQuery选择器是什么</a>
  59.                 <a>2.2-jQuery选择器的优势</a>
  60.                 <a>2.3-jQuery选择器</a>
  61.                 <a>2.4-应用jQuery改写示例</a>
  62.                 <a>2.5-选择器中的一些注意事项</a>
  63.                 <a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
  64.                 <a>2.7-还有其它选择器么？</a>
  65.                 <a>2.8-小结</a>
  66. </div>
  67.         <div class="has_children">
  68.                 <span>第3章-jQuery中的DOM操作</span>
  69.                 <a>3.1-DOM操作的分类</a>
  70.                 <a>3.2-jQuery中的DOM操作</a>
  71.                 <a>3.3-案例研究——某网站超链接和图片提示效果</a>
  72.                 <a>3.4-小结</a>
  73.         </div>
  74. </div>
  75. </body>
  76. </html>

回复 "jquery 简易竖式导航栏 addClass() removeClass()"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666