js实现选项卡切换效果

最新推荐文章于 2023-10-20 16:14:45 发布

mysql996

最新推荐文章于 2023-10-20 16:14:45 发布

阅读量583

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u010572493/article/details/53520638

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

http://www.imooc.com/code/1912

记录下思路吧：

先画好静态页面布局即四个列表然后第一个列表样式 display:inline-block，所有的列表去掉列表标志即

ul{list-style-type:none}

第三个和第四个列表设为隐藏，display:none,这样基本静态的图显示出来了然后根据下面的代码进行事件的添加，用到了html元素的index属性

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>    <style type="text/css">
        p:hover{cursor:pointer}
        .active{border-bottom: 1px solid #8B4513}

    </style>   
  <script>        window.οnlοad=function() {
            //获取所有的p元素
           var allp =document.getElementsByTagName("p");
            //为每个p元素添加鼠标经过的事件
            for(var i=0;i<allp.length;i++){
                allp[i].οnmοuseοver=function () {
                    //鼠标经过时将每个p元素的样式设为空
                    for(var i=0;i<allp.length;i++)
                    allp[i].className="";
                    //当前p元素样式设为active，每次鼠标进过都会执行这个脚本
                    this.className="active";

                }
            }
        }
    </script>

</head><body><p>你qq好</p><p >你好</p></body></html>