tab切换小案例及小知识总结

最新推荐文章于 2024-04-12 15:00:43 发布

爱上喝水的女孩

最新推荐文章于 2024-04-12 15:00:43 发布

阅读量508

点赞数

分类专栏： html js 文章标签： js

js 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            marign:0px;
            padding: 0px;
            background: #F7F7F7;
        }
        .tabs{
            width: 400px;
            margin: 30px auto;
            background-color: #FFFFFF;
            border: 1px solid #C0DCC0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        /*
        关于css的重要概念就是盒子模型，它控制着这些元素的宽度高度。
        padding+border+width=盒子宽度
        padding+border+height=盒子高度
        也就是说当我们设置一个宽度200的盒子，而实际呈现的盒子宽度可能会大于200px,除非是没有边框和内边距的，这就导致当我们希望
        呈现的盒子宽度是200px的时候，就需要减去它的边框和内边距，所以，在这里引出box-sizing有这个方法处理这种情况。

        当元素设置了box-sizing:border-box以后，设置元素的大小为200px，再改变它的左右边框和内边距时，它的内容区域就会自动调整，
        这样以后再设置padding也不用担心没有减小宽度值而变形了。
        box-sizing:border-box;在元素之内绘制元素的内边距和边框
                   content-box;在元素之外绘制元素的内边距和边框，会把其他盒子挤下来
                   inherit;集成父元素box-sizing属性的值
        */
        .tabs nav{
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #C0DCC0;
            display: flex;
        }
        /*
          1.浅谈弹性布局：用来为盒状模型提供最大的灵活性，设置flex后，子元素的float,clear,vertical-align属性都会失效。
          2.它可用于容器也可用于行内元素，简便，完整响应式的实现各种布局。
          3.采用flex布局的元素称为容器，它所有的子元素自动称为容器的成员，叫做项目。
          4.容器默认存在两根轴：主轴和垂直的交叉轴，项目默认沿主轴排列。
          以下6个属性设置在容器上：
                                 flex-direction:容器内项目的排列方向（默认是横向排列）
                                 flex-wrap:容器内项目换行方式
                                 flex-flow:以上两个属性的简写方式
                                 justify-content:项目在主轴上的对齐方式
                                 align-items:项目在交叉轴上如何对齐
                                 align-content:定义了多跟轴线的对齐方式。如果项目中有一根轴线，该属相就不起作用
          容器中项目的属性：
                          order:项目的排列顺序，数字越小越靠前
                          flex-grow：项目的放大比例，默认为0，如果存在剩余空间也不放大。
                          flex-shrink:项目的缩小比例，默认为1，如果空间不足，该项目将缩小。
                          flex-basis:在分配多余空间之前，项目占据的主轴空间。
                          flex:是flex-grow,flex-shrink,flex-basis的简写，默认为0 1 auto
                          align-self：允许单个项目有与其他项目不一样的对齐方式
        */
        nav a{
            display: block;
            width: 100px;
            border-right: 1px solid #fff;
            color: #000;
            text-decoration: none;
        }
        nav a:last-child{
            border-right: 0 none;
        }/*为了去除最后面的那条线*/
        nav a.active{
            background-color: #9BAF9B;
        }
        .cont{
            overflow: hidden;
            display: none;
        }
        .cont ul{
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div class="tabs">
        <nav>
            <a href="javascript:;" data-cont="local">国内新闻</a>
            <a href="javascript:;" data-cont="global">国际新闻</a>
            <a href="javascript:;" data-cont="sports">体育新闻</a>
            <a href="javascript:;" data-cont="funny">娱乐</a>
        </nav>
        <section class="cont" id="local">
            <ul>
                <li>南方大旱，农作物减产绝收面积上亩</li>
                <li>南方大旱，农作物减产绝收面积上亩</li>
                <li>南方大旱，农作物减产绝收面积上亩</li>
                <li>南方大旱，农作物减产绝收面积上亩</li>
                <li>南方大旱，农作物减产绝收面积上亩</li>
                <li>南方大旱，农作物减产绝收面积上亩</li>
            </ul>
        </section>
        <section class="cont" id="global">
            <ul>
                <li>禽流感在全国多作物减产绝收面积上亩</li>
                <li>禽流感在全国多作物减产绝收面积上亩</li>
                <li>禽流感在全国多作物减产绝收面积上亩</li>
                <li>禽流感在全国多作物减产绝收面积上亩</li>
                <li>禽流感在全国多作物减产绝收面积上亩</li>
                <li>禽流感在全国多作物减产绝收面积上亩</li>
            </ul>
        </section>
        <section class="cont" id="sports">
            <ul>
                <li>猪流感在广东群体性暴发</li>
                <li>猪流感在广东群体性暴发</li>
                <li>猪流感在广东群体性暴发</li>
                <li>猪流感在广东群体性暴发</li>
                <li>猪流感在广东群体性暴发</li>
                <li>猪流感在广东群体性暴发</li>
            </ul>
        </section>
        <section class="cont" id="funny">
            <ul>
                <li>宜宾公安副局长无证驾驶出车祸 弃车离开现场</li>
                <li>宜宾公安副局长无证驾驶出车祸 弃车离开现场</li>
                <li>宜宾公安副局长无证驾驶出车祸 弃车离开现场</li>
                <li>宜宾公安副局长无证驾驶出车祸 弃车离开现场</li>
                <li>宜宾公安副局长无证驾驶出车祸 弃车离开现场</li>
                <li>宜宾公安副局长无证驾驶出车祸 弃车离开现场</li>
            </ul>
        </section>
    </div>
    <script>
        (function (key){
            //首先获得所有的导航
            var navs = document.querySelectorAll('nav a');
            //遍历导航，添加当前的样式
            for(var i=0;i<navs.length;i++){
                //如果用户指定的当前样式.classList返回元素的类名，是只读的。
                if(key==i){
                    navs[i].classList.add('active');
                    //拿到要显示内容section的id
                    var secId=navs[i].dataset['cont'];
                    //获得对应的section标签
                    document.querySelector('#'+secId).style.display='block';
                }
                    //给每个导航绑定点击事件
                    navs[i].onclick = function () {
                        //之前有active样式的清除，显示的section隐藏
                        var currentNav = document.querySelector('.active');
                        //获取的对应的内容区域
                        var currentId = currentNav.dataset['cont'];
                        //去掉导航的active样式
                        currentNav.classList.remove('active');
                        //隐藏对应的区域
                        document.querySelector('#' + currentId).style.display='none';


                        //突出显示自己导航的样式  对应section的显示

                        this.classList.add('active');
                        //对应的section显示出来
                        var myId = this.dataset['cont'];
                        document.querySelector('#'+myId).style.display='block';

                    }
            }
        })(0);
    </script>
</body>
</html>

为了拓宽思路，还有一种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        .box{
            width: 500px;
            height: 400px;
            border: 1px solid #ccc;
            margin:100px auto;
            overflow: hidden;
        }
        ul{
            width: 600px;
            height: 40px;
            margin-left: -1px;
            list-style:none;
        }
        li{
            width: 101px;
            height: 40px;
            float: left;
            text-align: center;
            font: 600 18px/40px "simsun";
            background-color: pink;
            cursor: pointer;
        }
        span{
            display: none;
            width: 500px;
            height: 360px;
            background-color: yellow;
            text-align: center;
            font: 700 150px/360px "simsun";
        }
        .show{
            display: block;
        }
        .current{
            background-color: yellow;
        }
    </style>
    <script>
        window.onload = function () {


        //需求：鼠标放到li上，li本身变色(添加类)对应的span也会显示出来，利用索引索引显示盒子
        //获取事件源
        var liArr = document.getElementsByTagName("li");
        var spanArr = document.getElementsByTagName("span");

        //绑定事件
        for(var i=0;i<liArr.length;i++){
            //绑定索引
            liArr[i].index = i;
            liArr[i].onmouseover = function () {
                //利用索引显示盒子(排他思想)
                for(var j=0;j<liArr.length;j++){
                    liArr[j].className = "";
                    spanArr[j].className = "";
                }
                this.className = "current";
                spanArr[this.index].className = "show";
            }
        }
        }
    </script>
</head>
<body>
        <div class="box">
            <ul>
                <li class="current">鞋子</li>
                <li>袜子</li>
                <li>帽子</li>
                <li>裤子</li>
                <li>裙子</li>
            </ul>
            <span class="show">鞋子</span>
            <span>帽子</span>
            <span>帽子</span>
            <span>裤子</span>
            <span>裙子</span>
        </div>
</body>
</html>

上述的函数可以发封装成下面的函数：

<script>
        window.onload = function () {
            //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的span也显示出来(添加类);
            //思路：1.点亮盒子。   2.利用索引值显示盒子。
            //步骤：
            //1.获取事件源和相关元素
            //2.绑定事件
            //3.书写事件驱动程序（排他思想）


            //1.获取事件源和相关元素
            var boxArr = document.getElementsByClassName("box");
            //函数调用
            for(var i=0;i<boxArr.length;i++){
                fn(boxArr[i]);
            }

            //函数封装
            function fn(ele){
                var liArr = ele.getElementsByTagName("li");
                var spanArr = ele.getElementsByTagName("span");
                //2.绑定事件（循环绑定）
                for(var i=0;i<liArr.length;i++){
                    //绑定索引值(自定义属性)
                    liArr[i].setAttribute("index",i);
                    liArr[i].onmouseover = function () {
                        //3.书写事件驱动程序（排他思想）
                        //1.点亮盒子。   2.利用索引值显示盒子。(排他思想)
                        for(var j=0;j<liArr.length;j++){
                            liArr[j].removeAttribute("class");
                            spanArr[j].removeAttribute("class");
                        }
                        this.setAttribute("class","current");
                        spanArr[this.getAttribute("index")].setAttribute("class","show");
                    }
                }
            }
        }
    </script>