夜光带你走进前端工程师（三十五 jS ）

最新推荐文章于 2019-06-01 18:19:51 发布

GeniusTeam-夜光

最新推荐文章于 2019-06-01 18:19:51 发布

阅读量149

点赞数

分类专栏： My thoughts 前端工程师 JS核心技术文章标签： js

本文链接：https://blog.csdn.net/weixin_41987706/article/details/90710787

版权

My thoughts 同时被 3 个专栏收录

911 篇文章 25 订阅

订阅专栏

前端工程师

48 篇文章 0 订阅

订阅专栏

JS核心技术

23 篇文章 1 订阅

订阅专栏

夜光序言：

多年以后，当我又开始回忆那些失去的人或事时，我一定会豁达的抿着嘴微笑，微笑着回忆一切，包括你，包括曾经迷失过自我的自己。

正文：

JS

夜光

复习tab栏

夜光

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0;}


    </style>
</head>
<body>
<div class="box">
    <div class="mt">
        <span>新闻</span>
        <span>体育</span>
        <span>八卦</span>
        <span>娱乐</span>
    </div>
    <div class="mb">
        <ul>
            <li>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

// 帅气

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>      //学会精准书写css js 语言基本功
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        .box{
            width: 250px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="mt">
        <span>新闻</span>
        <span>体育</span>
        <span>八卦</span>
        <span>娱乐</span>
    </div>
    <div class="mb">
        <ul>
            <li>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

<style>
    *{margin: 0;padding: 0;}
    ul{list-style: none;}
    .box{
        width: 340px;
        height: 300px;
        border: 1px solid #ccc;
        margin: 100px auto;
    }
    .mt span{
        display: inline-block;
        width: 80px;
        height: 30px;
        background-color: pink;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
    }
    .mb li{
        height: 270px;;
        width: 340px;
        background-color: antiquewhite;
    }
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        .box{
            width: 340px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
        }
        .mt span{
            display: inline-block;
            width: 80px;
            height: 30px;
            background-color: pink;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
        .mt span.current{
            background-color: aquamarine;
        }
        .mb li{
            height: 270px;;
            width: 340px;
            background-color: antiquewhite;
            display: none;
        }
        .mb li.a{
            display: block;
        }
    </style>
    <script>
        window.onload = function(){
            var spans = document.getElementsByTagName("span");       //得到所有span
            var lis = document.getElementsByTagName("li");        /*   //得到所有li*/
            for(var i=0;i<spans.length;i++)
            {
                 spans[i].onmouseover = function(){
                     //清除所有span类
                     /*spans.calssName = "";*/
                     for(var j=0;j<spans.length;j++)
                     {
                         spans[j].className = "";
                     }
                     //留下自己   排他思想
                     this.className= "current";

                 }
            }
        }
    </script>
</head>
<body>
<div class="box">
    <div class="mt">
        <span class="current">新闻</span>
        <span>体育</span>
        <span>八卦</span>
        <span>娱乐</span>
    </div>
    <div class="mb">
        <ul>
            <li class="a">新闻模块</li>
            <li>新闻模块</li>
            <li>新闻模块</li>
            <li>新闻模块</li>
        </ul>
    </div>
</div>
</body>
</html>

以上不断优化操作

<script>
    window.onload = function(){
        var spans = document.getElementsByTagName("span");       //得到所有span
        var lis = document.getElementsByTagName("li");        /*   //得到所有li*/
        for(var i=0;i<spans.length;i++)
        {
             spans[i].index = i;   //这句话十分关键   核心中核心
             spans[i].onmouseover = function(){
                 //清除所有span类
                 /*spans.calssName = "";*/
                 for(var j=0;j<spans.length;j++)
                 {
                     spans[j].className = "";
                     lis[j].className = "";
                 }
                 //留下自己   排他思想   // this。index 是span的索引号   被li使用了
                 this.className= "current";
                 lis[this.index].className = "show";
             }
        }
    }
</script>

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夜光带你走进前端工程师（三十五 jS ）

夜光序言：多年以后，当我又开始回忆那些失去的人或事时，我一定会豁达的抿着嘴微笑，微笑着回忆一切，包括你，包括曾经迷失过自我的自己。正文： JS 夜光复习tab栏夜光 <!DOCTY...
复制链接

扫一扫