使用javascript实现简单的选项卡切换效果

最新推荐文章于 2022-08-09 10:17:53 发布

ajiblog

最新推荐文章于 2022-08-09 10:17:53 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： javascript 标签

本文链接：https://blog.csdn.net/ajiblog/article/details/50520828

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript实现简单的选项卡切换效果。通过获取外层div中的li和div元素，清空初始样式，然后在点击li时为选中项添加特定class，达到内容切换的目的。

摘要由CSDN通过智能技术生成

选项卡页面时JS中十分重要的实现方式，其中所运用到的思想在JS中运用广泛，主要包括for循环以及函数的形参和函数的自定义属性的运用。

静态页面以及样式如下：
<!DOCTYPE html>
<meta charset="UTF-8">
</head>
< style type=”text/css”>
html,body,div,ul,li,span,a{
padding: 0;
font-size:14px;
font-family: sans-serif;
list-style: none;
width:499px;
margin:40px auto 0;
border:1px solid #000;
width: 520px;
overflow: hidden;
float:left;
width:167px;
height:30px;
text-align: center;
cursor:pointer;
margin-right: -1px;
background:#ffff00;
}
display: none;
height: 240px;
line-height: 240px;
text-align: center;
display: block;
background: #ffff00;
transition: all .3s;
<div id="tab">
<li class="select">汽车</li>
<li>科技</li>
<div class="select">大众汽车公司尾气排放事件全球继续发酵</div>
<div>新款iphone再度大卖，安卓市场受到挑战</div>
<script type="text/javascript" src="tab1.js"></script>
</html>

<html>
<head>
    <title></title>
    margin:0;
}
ul,li{
}
#tab{
}
#tab ul{
}
#tab ul li{
    line-height: 30px;
    color:#4a4a4a;
}
#tab ul li.select{
    font-weight:bold;
#tab div{
    width:499px;
}
#tab div.select{
}
</style>
<body>
    <ul>
        <li>财经</li>
    </ul>
    <div>第四季度全国商品房市场有所回暖</div>
</div>
</body>
之后实现的效果如下：

JS效果实现思路如下：

首先我们获得外层div中的每个li和div

再执行我们想要的效果

设置一个函数，在执行这个函数的时候，我们先将所有的li和div的样式清空，在这里就是将他们的class类名清空。

然后当用户点击哪个li的时候，我们将这个li以及相对应的div赋予相应的class类名。
code:
oTab = document.getElementById("tab");
oLis = oTab.getElementsByTagName("li");
oDivs = oTab.getElementsByTagName("div");
function tabCont(n) {
    for (var i = 0; i < oLis.length; i++) {
        oLis[i].className = null;
        oDivs[i].className = null
    }
    oLis[n].className = "select";
    oDivs[n].className = "select";
}
for (var i = 0; i < oLis.length; i++) {
    oLis[i].num = i;
    oLis[i].onmouseover = function () {
        tabCont(this.num);
    }
}