原生JS写Tab切换

最新推荐文章于 2024-05-17 03:16:20 发布

程序员海军

最新推荐文章于 2024-05-17 03:16:20 发布

阅读量525

点赞数

文章标签： a' s'

本文链接：https://blog.csdn.net/HaiJun_Aion/article/details/82082668

版权

						## 原生JS实现Tab切换 ##

本人是前端菜鸟一枚，喜欢钻研前端，前端的可视化界面带来的舒适，即可编写就可以看到效果界面，成就感满满！
这里写图片描述
废话不多说，开始撸代码！

这里写代码片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    #outer{
        width: 450px;
        margin: 10px auto;
    }
    #tab{
        overflow: hidden;
        zoom:1;
        background: #000;
        border:1px solid #000;
    }
    #tab li{
        float:left;
        color:#fff;
        height:30px;
        cursor:pointer;
        line-height:30px;
        list-style-type:none;
        padding:0 20px;
    }
    #tab li.current{
        color:#000;
        background:#ccc;
    }
    #content{
        border:1px solid #000;
        border-top-width:0;
    }
    #content ul{
        line-height:25px;
        display:none;
        margin:0 30px;
        padding:10px 0;
    }
    </style>
    <script>
    window.onload=function(){
       var tab = document.getElementById("tab").getElementsByTagName("li");
       var content = document.getElementById("content").getElementsByTagName("ul");
       for(var i = 0; i<tab.length;i++){
           tab[i].index=i;
           tab[i].onmouseover=function(){
                for(var n = 0; n<tab.length;n++){
                    tab[n].className="";
                    this.className="current";
                }
                for(var n = 0;n<content.length;n++){
                    content[n].style.display = "none";
                    content[this.index].style.display="block"
                }
           }
       }
    }
    </script>
</head>
<body>
    <div id="outer">
        <ul id="tab">
            <li class="current">第一课</li>
            <li>第二课</li>
            <li>第三课</li>
        </ul>
        <div id="content">
            <ul style="display: block;">
                <li>网页特效原理分析</li>
                <li>响应用户操作</li>
                <li>提示框效果</li>
                <li>事件驱动</li>
                <li>元素属性操作</li>
            </ul>
            <ul>
                    <li>网ddddddddd</li>
                    <li>响应用户操作</li>
                    <li>提示框效果</li>
                    <li>事件驱动</li>
                    <li>元素属性操作</li>
                    <li>网ddddddddd</li>
                    <li>响应用户操作</li>
                    <li>提示框效果</li>
                    <li>事件驱动</li>
                    <li>元素属性操作</li>
            </ul> 
            <ul>
                    <li>AAAAAAAAAAAAA</li>
                    <li>响应用户操作</li>
                    <li>提示框效果</li>
                    <li>事件驱动</li>
                    <li>元素属性操作</li>
            </ul>
        </div>  
    </div>
</body>
</html>

以上就是Tab切换代码；
这个不是动态更改的，只是写好的静态数据，点击相应的标签显示对应的内容。

思路总结：

1.写好静态数据页面
2.获取Tab标签和内容li的伪数组
3.然后遍历Tab伪数组，tab[i].inidex=i 将 i的值存入tab[i]中；
4.然后通过onmouseover事件，在函数中设置Tab和li属性就OK！

代码中要是有哪些不好地方，欢迎指责。

17：41
2018/8/26

程序员海军

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生JS写Tab切换

## 原生JS实现Tab切换 ##本人是前端菜鸟一枚，喜欢钻研前端，前端的可视化界面带来的舒适，即可编写就可以看到效果界面，成就感满满！废话不多说，开始撸代码！这里写代码片&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt;&am
复制链接

扫一扫