列表隔行变色、显示和隐藏下拉菜单、列表的高亮显示效果

最新推荐文章于 2022-03-13 09:54:10 发布

Leon_Jinhai_Sun

最新推荐文章于 2022-03-13 09:54:10 发布

阅读量681

点赞数

本文链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/86496101

版权

列表隔行变色

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
      $(function(){
          // 点击按钮
          $("#btn").click(function(){
              // 奇----红色,偶----黄色
              // odd----奇数的
              // even----偶数
              $("ul>li:even").css("backgroundColor","red");
              $("ul>li:odd").css("backgroundColor","yellow");
          }); 
      });
  </script>
</head>
<body>
<input type="button" value="隔行变色" id="btn">
<ul>
  <li>我是第1个li</li>
  <li>我是第2个li</li>
  <li>我是第3个li</li>
  <li>我是第4个li</li>
  <li>我是第5个li</li>
  <li>我是第6个li</li>
  <li>我是第7个li</li>
  <li>我是第8个li</li>
  <li>我是第9个li</li>
  <li>我是第10个li</li>
</ul>

<script>
  // $(function () {
    
  //   //就这么写，会不会报错，会不会有效果
  //   var lis = $("li");
  //   for (var i = 0; i < lis.length; i++) {
  //     if (i % 2 == 0) {
        
  //       // lis:jq对象
  //       // lis[i]:DOM对象，通过下标取出来了
  //       lis[i].style.backgroundColor = "pink";
  //     } else {
  //       lis[i].style.backgroundColor = "hotpink";
  //     }
  //   }
    
  // });
</script>
</body>
</html>

显示和隐藏下拉菜单

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    
    ul {
      list-style: none;
    }
    
    .wrap {
      width: 330px;
      height: 30px;
      margin: 100px auto 0;
      padding-left: 10px;
      background-image: url(imgs/bg.jpg);
    }
    
    .wrap li {
      background-image: url(imgs/libg.jpg);
    }
    
    .wrap > ul > li {
      float: left;
      margin-right: 10px;
      position: relative;
    }
    
    .wrap a {
      display: block;
      height: 30px;
      width: 100px;
      text-decoration: none;
      color: #000;
      line-height: 30px;
      text-align: center;
    }
    
    .wrap li ul {
      position: absolute;
      top: 30px;
      display: none;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
      // 页面加载事件
      $(function(){
          // 获取ul中所有的li,然后注册鼠标进入和鼠标离开事件
          $(".wrap>ul>li").mouseenter(function(){
              // 当前li中的所有的子元素,再从所有的子元素中找ul
              $(this).children('ul').stop().show(500);
          });

          // 鼠标离开
          $(".wrap>ul>li").mouseleave(function(){
              $(this).children('ul').stop().hide(500);
          });
      });
  </script>

</head>
<body>
<div class="wrap">
  <ul>
    <li>
      <a href="javascript:void(0);">一级菜单1</a>
      <ul class="ul">
        <li><a href="javascript:void(0);">二级菜单11</a></li>
        <li><a href="javascript:void(0);">二级菜单12</a></li>
        <li><a href="javascript:void(0);">二级菜单13</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);">一级菜单2</a>
      <ul>
        <li><a href="javascript:void(0);">二级菜单21</a></li>
        <li><a href="javascript:void(0);">二级菜单22</a></li>
        <li><a href="javascript:void(0);">二级菜单23</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);">一级菜单3</a>
      <ul>
        <li><a href="javascript:void(0);">二级菜单31</a></li>
        <li><a href="javascript:void(0);">二级菜单32</a></li>
        <li><a href="javascript:void(0);">二级菜单33</a></li>
      </ul>
    </li>
  </ul>
</div>

</body>
</html>

列表的高亮显示效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
      ul {
        list-style-type: none;
        cursor: pointer;
      }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
      // 高亮显示的效果:鼠标进入,当前的li有背景颜色,离开颜色就干掉了
      // 获取ul中所有的li标签,添加鼠标进入和鼠标离开事件

      // 页面加载
      // $(function(){
      //     // 鼠标进入
      //     $("#uu>li").mouseenter(function(){
      //         $(this).css("backgroundColor","red");
      //     });

      //     // 鼠标离开
      //     $("#uu>li").mouseleave(function(){
      //         $(this).css("backgroundColor","");
      //     });
      // });

      // $(function(){
      //     // 鼠标进入
      //     $("#uu>li").mouseenter(function(){
      //         $(this).css("backgroundColor","red");
      //     }).mouseleave(function(){
      //         $(this).css("backgroundColor","");
      //     });
      // });

      // $(function(){
      //     // 鼠标进入
      //     $("#uu>li").mouseenter(function(){
      //         $(this).css("backgroundColor","red");
      //     });
      //     // 鼠标离开事件
      //     $("#uu>li").mouseleave(function(){
      //         $(this).css("backgroundColor","");
      //     });
      //     // 点击事件:当前的li中的字体样式改变
      //     $("#uu>li").click(function(){
      //         $(this).css("color","green");
      //         $(this).css("fontSize","29px");
      //         $(this).css("fontFamily","Century Gothic");
      //     });
      // });
      
      // 链式编程
      $(function(){
          // 鼠标进入
          $("#uu>li").mouseenter(function(){
              $(this).css("backgroundColor","red");
          }).mouseleave(function(){
              $(this).css("backgroundColor","");
          }).click(function(){
              $(this).css("color","green").css("fontSize","29px")
                      .css("fontFamily","Century Gothic");
          });
      });
      

  </script>
</head>
<body>

<ul id="uu">
  <li>倩女幽魂</li>
  <li>海阔天空</li>
  <li>千纸鹤</li>
  <li>真的爱你</li>
  <li>丑八怪</li>
  <li>突然的自我</li>
  <li>左手右手</li>
  <li>喜洋洋</li>
  <li>一路顺风</li>
</ul>
  
</body>
</html>

Leon_Jinhai_Sun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
列表隔行变色、显示和隐藏下拉菜单、列表的高亮显示效果

列表隔行变色<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.1.js"></script> <scr...
复制链接

扫一扫