JavaScript的隔行变色和选项卡

最新推荐文章于 2021-12-10 17:29:23 发布

志若鸿鹄，尺步寸微

最新推荐文章于 2021-12-10 17:29:23 发布

阅读量309

点赞数

分类专栏： js 文章标签： js 选项卡隔行变色

本文链接：https://blog.csdn.net/qq_41363062/article/details/86533058

版权

一、隔行变色

思路

就是用css写一个li列表，通过在函数里面return出来一个document.getElementsByTagName方法，执行这个函数，传参获取所有的li，是一个类数组，然后用for循环循环出所有li，当循环到第几个li的时候用这个li的i索引i%2，==0的时候（偶数）的是一个颜色，否则else是另一个颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变色隔行</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .til li{
           width: 350px;
            height: 50px;
            border:1px solid ;
        }
    </style>
</head>
<body>
<div>
    <ul class="til">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
</body>
</html>

<script>
      var  getTag  = function (n) {
          return document.getElementsByTagName(n)
      };
    var url =getTag('li');
      console.log(url);
      for (var i = 0; i < url.length; i++) {
         if(i%2 == 0){
             url[i].style.background="orange"
         }else{
             url[i].style.background="red"
         }

      }
  <script>

在这里插入图片描述

鼠标滑过变色

思路

在隔行变色的基础上加上一个for循环，利用url[i].myqq=url[i].style.background;这个保存鼠标滑过之前的颜色，然后利用this指向鼠标滑过哪个li，this指向哪个li，使其变色，利用this指向保存鼠标滑过的li之前的颜色值，让鼠标划过后恢复原来的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变色隔行</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .til li{
           width: 350px;
            height: 50px;
            border:1px solid ;
        }
    </style>
</head>
<body>
<div>
    <ul class="til">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
</body>
</html>

<script>
      var  getTag  = function (n) {
          return document.getElementsByTagName(n)
      };
    var url =getTag('li');
      console.log(url);
      for (var i = 0; i < url.length; i++) {

最低0.47元/天解锁文章

志若鸿鹄，尺步寸微

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的隔行变色和选项卡

一、隔行变色思路就是用css写一个li列表，通过在函数里面return出来一个document.getElementsByTagName方法，执行这个函数，传参获取所有的li，是一个类数组，然后用for循环循环出所有li，当循环到第几个li的时候用这个li的i索引i%2，==0的时候（偶数）的是一个颜色，否则else是另一个颜色&lt;!DOCTYPE html&gt;&lt;html l...
复制链接

扫一扫