JavaScript的隔行变色和选项卡

最新推荐文章于 2022-04-25 20:30:34 发布

原创最新推荐文章于 2022-04-25 20:30:34 发布 · 355 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #选项卡 #隔行变色

js 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现表格隔行变色，包括基础的隔行变色思路，以及增加鼠标滑过时的颜色变化效果。此外，还详细讲解了创建选项卡的功能，包括线上示例和代码实现。最后，将隔行变色和选项卡功能结合，展示了综合运用的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、隔行变色

思路

就是用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++) {
         if(i%2 == 0){
             url[i].style.background="orange"
         }else{
             url[i].style.background="red"
         }

      }
      /*this的思想 ;把初始色值存储到了 每一个li的自定义myqqq属性上 ,
   当划出li时，再用li身上的自定义的myqqq的值 赋给 li 的背景色*/
      for (var i = 0; i < url.length; i++) {
         url[i].myqq=url[i].style.background;
          url[i].onmouseover=function () {
              this.style.background="blue"
          }
          url[i].onmouseout=function () {
              this.style.background=this.myqq
          }
      }

</script>

鼠标滑过的第二个办法

/*思路  在函数外边定义一个变量 用来存储 每一行变色之前的色值
         在鼠标划出之后，让划出的li的颜色变成外边变量存储的色值*/
   var col = null;
    for(var i = 0; i < lis.length; i++){
        console.log(lis[i].style.backgroundColor);
        lis[i].onmouseover = function () {
            col = this.style.backgroundColor;
            this.style.backgroundColor = '#2EC2CC';
        };
        lis[i].onmouseout = function () {
            this.style.backgroundColor = col;
            console.log('out');
        };
    }

在这里插入图片描述

二、选项卡

选项卡线上地址，点击后面选项卡三个字选项卡

利用this指向使鼠标点击哪个li给对应li加上active的class名，使其变成块级元素显示出来，并有个clearClass函数清除之前的li的active

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        img{
            width: 100%;
            height:100%;
        }
        .option{
                float: left;
                    }
        .option  ul li{
            width: 100px;
            height: 50px;
            text-align: center;
            border: 1px solid;
            background: orangered;
            color:#fff;
            line-height: 50px;
        }
        .option  ul li.active{
           background: #ccc;
            border: 1px solid  black;
        }
        .til{
            float: left;
            height:260px;
            width: 300px;
            border:1px solid black ;
        }
        .til ul{
            width: 100%;
            height:100%;
            overflow: hidden;
        }
        .til ul li{
            width: 100%;
            height:100%;
            display:none;
        }
        .til ul li.active{
            display: block;
        }
    </style>
</head>
<body>
<div class="option">
    <ul>
        <li class="active">上路</li>
        <li>中路</li>
        <li>下路</li>
        <li>辅助</li>
        <li>打野</li>
    </ul>
</div>
<div class="til">
    <ul>
        <li class="active"><img src="https://img03.sogoucdn.com/app/a/100520093/ca86e620b9e623ff-e7ae36db714776c0-7403254d77ae828c79a3c827a953b714.jpg" alt=""></li>
        <li><img src="https://i01piccdn.sogoucdn.com/eb9525f2018a46b3" alt=""></li>
        <li><img src="https://i02picsos.sogoucdn.com/ff63c0a760961f80" alt=""></li>
        <li><img src="https://i04piccdn.sogoucdn.com/1e9d2d5f558be8eb" alt=""></li>
        <li><img src="https://i04piccdn.sogoucdn.com/6d399ac7eda1a6ba" alt=""></li>
    </ul>
</div>
</body>
</html>

<script>
    var optDiv = document.getElementsByClassName('option')[0];
    var optDivUl = optDiv.getElementsByTagName('ul')[0];
    var opts = optDivUl .getElementsByTagName('li');

    var tilDiv = document.getElementsByClassName('til')[0];
    var tilDivUl = tilDiv.getElementsByTagName('ul')[0];
    var tils= tilDivUl.getElementsByTagName('li');
    console.log(opts, tils);
    function clearClass() {
        for (var i = 0; i < opts.length; i++) {
           opts[i].className='';
           tils[i].className='';

        }
    }
    for (var i = 0; i < opts.length; i++) {
        opts[i].myIndex=i;
        opts[i].onclick =function () {
            clearClass();
            opts[this.myIndex].className='active';
            tils[this.myIndex].className='active';
        }
    }
</script>

效果图

在这里插入图片描述

三、选项卡+隔行变色+鼠标滑过变色

代码线上地址点击后面的字　线上地址

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="" name="Keyords">
    <meta name="description" content=""/>
    <title>孙佳生大神</title>
    <link rel="icon" href="http://cdn.hommk.com/pcgame/images/new_version/favicon.png?1529473162">

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #div1{
            width: 500px;
            height: 450px;
            overflow: hidden;
            margin: 100px auto;
        }
        .til{
            width: 100px;
            float: left;
        }

        .til li {
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-bottom: 1px solid #cccccc;
            overflow: hidden;
            color: #fff;
        }
        .body{
            width: 400px;
            float: left;
        }
        .body {
            width: 400px;
            height: 450px;
        }
        .body li {
            width: 400px;
            height: 450px;
            padding:30px;
            box-sizing: border-box;
            background:#fdfcfc;
            line-height: 30px;
            font-size: 25px;
            text-align: left;
            display: none;
        }
        .body .active{
            display: block;
        }

    </style>
</head>
<body>
<div id="div1">
    <ul class="til">
    <li class="active">老大囚牛</li>
    <li>老二睚眦</li>
    <li>老三嘲风</li>
    <li>四子蒲牢</li>
    <li>五子狻猊</li>
    <li>六子霸下</li>
    <li>七子狴犴</li>
    <li>八子负屃</li>
    <li>老九螭吻</li>
</ul>
    <ul class="body">
        <li class="active">
            囚牛,是龙生九子中的老大，平生爱好音乐，它常常蹲在琴头上欣赏弹拨弦拉的音乐，因此琴头上便刻上它的遗像。这个装饰一直沿用下来，一些贵重的胡琴头部至今仍刻有龙头的形象，称其为“龙头胡琴”。
        </li>
        <li>睚眦，是老二，平生好斗喜杀，刀环、刀柄、龙吞口便是它的遗像。这些武器装饰了龙的形象后，更增添了慑人的力量。它不仅装饰在沙场名将的兵器上，更大量地用在仪仗和宫殿守卫者武器上，从而更显得威严庄重。</li>
        <li>
            嘲风，形似兽，是老三，平生好险又好望，殿台角上的走兽是它的遗像。这些走兽排列着单行队，挺立在垂脊的前端，走兽的领头是一位骑禽的“仙人”，后面依次为：龙、凤、狮子、天马、海马、狻猊、押鱼、獬豸、斗牛、和行什。它们的安放有严格的等级制度，只有北京故宫的太和殿才能十样俱全，次要的殿堂则要相应减少。嘲风，不仅象征着吉祥、美观和威严，而且还具有威慑妖魔、清除灾祸的含义。嘲风的安置，使整个宫殿的造型既规格严整又富于变化，达到庄重与生动的和谐，宏伟与精巧的统一，它使高耸的殿堂平添一层神秘气氛。
        </li>
        <li>
            蒲牢，形似盘曲的龙，排行第四，平生好鸣好吼，洪钟上的龙形兽钮是它的遗像。原来蒲牢居住在海边，虽为龙子，却一向害怕庞然大物的鲸鱼。当鲸鱼一发起攻击，它就吓得大声吼叫。人们报据其“性好鸣”的特点，“凡钟欲令声大音”，即把蒲牢铸为钟纽，而把敲钟的木杵作成鲸鱼形状。敲钟时，让鲸鱼一下又一下撞击蒲牢，使之“响入云霄”且“专声独远”。
        </li>
        <li>
            狻猊，形似狮子，排行第五，平生喜静不喜动，好坐，又喜欢烟火，因此佛座上和香炉上的脚部装饰就是它的遗像。相传这种佛座上装饰的狻猊是随着佛教在汉代由印度人传入中国的，至南北朝时期，我国的佛教艺术上已普遍使用，这种造型经过我国民间艺人的创造，使其具有中国的传统气派，后来成了龙子的老五，它布置的地方多是在结跏趺坐或交脚而坐的佛菩萨像前。明清之际的石狮或铜狮颈下项圈中间的龙形装饰物也是狻猊的形象，它使守卫大门的中国传统门狮更为睁崃威武。
        </li>
        <li>
            霸下，又名赑屃，形似龟，是老六，平生好负重，力大无穷，碑座下的龟趺是其遗像。传说霸下上古时代常驮着三山五岳，在江河湖海里兴风作浪。后来大禹治水时收服了它，它服从大禹的指挥，推山挖沟，疏遍河道，为治水作出了贡献。洪水治服了，大禹担心霸下又到处撒野，便搬来顶天立地的特大石碑，上面刻上霸下治水的功迹，叫霸下驮着，沉重的石碑压得它不能随便行走。霸下和龟十分相似，但细看却有差异，霸下有一排牙齿，而龟类却没有，霸下和龟类在背甲上甲片的数目和形状也有差异。霸下又称石龟，是长寿和吉祥的象征。它总是吃力地向前昂着头，四只脚拼命地撑着，挣扎着向前走，但总是移不开步。我国一些显赫石碑的基座都由霸下驮着，在碑林和一些古迹胜地中都可以看到。
        </li>
        <li>
            狴犴，又名宪章，形似虎，是老七。它平生好讼，却又有威力，狱门上部那虎头形的装饰便是其遗像。传说狴犴不仅急公好义,仗义执言，而且能明辨是非，秉公而断，再加上它的形象威风凛凛,囚此除装饰在狱门上外，还匐伏在官衙的大堂两侧。每当衙门长官坐堂，行政长官衔牌和肃静回避牌的上端，便有它的形象，它虎视眈眈，环视察看，维护公堂的肃穆正气。
        </li>
        <li>
            负屃，似龙形，排行老八，平生好文，石碑两旁的文龙是其遗像。我国碑碣的历史久远，内容丰富，它们有的造型古朴，碑体细滑、明亮，光可鉴人；有的刻制精致，字字有姿，笔笔生动；也有的是名家诗文石刻，脍炙人口，千古称绝。而负屃十分爱好这种闪耀着艺术光彩的碑文，它甘愿化做图案文龙去衬托这些传世的文学珍品，把碑座装饰得更为典雅秀美。它们互相盘绕着，看去似在慢慢蠕动，和底座的霸下相配在一起，更觉壮观。
        </li>
        <li>
            螭吻，又名鸱尾、鸱吻，龙形的吞脊兽，是老九，口阔噪粗，平生好吞，殿脊两端的卷尾龙头是其遗像。《太平御览》有如下记述：“唐会要目，汉相梁殿灾后，越巫言，‘海中有鱼虬，尾似鸱，激浪即降雨’遂作其像于尾，以厌火祥。”文中所说的“巫”是方士之流，“鱼虬”则是螭吻的前身。螭吻属水性，用它作镇邪之物以避火。
        </li>
    </ul>
</div>
</body>
</html>
<script>

    var oul = document.getElementsByClassName('til')[0];
    var oli = oul.getElementsByTagName('li');
    var bul = document.getElementsByClassName('body')[0];
    var bli = bul.getElementsByTagName('li');
    console.log(oli);
    for (var i = 0; i < oli.length; i++) {
        if (i%2==0){
            oli[i].style.backgroundColor='#CCC395'
        }else if (i%2==1){
            oli[i].style.backgroundColor='#ccc'
        }

    }
    var clearClass = function () {
        for (var i = 0; i < oli.length; i++) {
            oli[i].className='';
            bli[i].className=''

        }
    };
    for (var i = 0; i < oli.length; i++) {
       oli[i].mc = oli[i].style.backgroundColor;
       oli[i].mi = i;
       oli[i].onmouseover =function () {
           clearClass();
//           this.className="active";
           bli[this.mi].className="active";
           this.style.backgroundColor='#00a77b'
       };
       oli[i].onmouseout =function () {
           this.style.backgroundColor=this.mc
       }



    }

</script>