简单纯js实现的网页tab选项卡切换效果

江山如画 • 2018年2月12日上午11:05 • 网页特效 • 阅读 4173

有很多网站，当鼠标放到不同的标签项上或单击该栏目标签会显示不同的内容，也就是tab选项卡切换效果。

如下图：

今天给大家分享一款非常简单实用的JS网页tab选项卡切换效果，希望能对大家有所帮助。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单实用的网页tab选项卡切换效果-www.125jz.com</title>
<style>
*{margin:0;padding:0;}
body{font-size:14px;font-family:"Microsoft YaHei";}
ul,li{list-style:none;}
#tab{position:relative;}
#tab .tabList ul li{
  float:left;
  background:#fefefe;
  background:-moz-linear-gradient(top, #fefefe, #ededed);	
  background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed));
  background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
  border:1px solid #ccc;
  padding:5px 0;
  width:100px;
  text-align:center;
  margin-left:-1px;
  position:relative;
  cursor:pointer;
}
#tab .tabCon{
  position:absolute;
  left:-1px;
  top:32px;
  border:1px solid #ccc;
  border-top:none;
  width:403px;
  height:100px;
}
#tab .tabCon div{
  padding:10px;
  position:absolute;
  opacity:0;
  filter:alpha(opacity=0);
}
#tab .tabList li.cur{
  border-bottom:none;
  background:#fff;
}
#tab .tabCon div.cur{
  opacity:1;
  filter:alpha(opacity=100);
}
</style>
</head>
<body>
<!-- 代码 begin -->
<div id="tab" style="margin-left:460px;margin-top:20px">
  <div class="tabList">
  <ul>
    <li class="cur">站点新闻</li>
    <li>网站运营</li>
    <li>酷站欣赏</li>
    <li>网页素材</li>
  </ul>
  </div>
  <div class="tabCon">
  <div class="cur">如何删除百度上的网站负面新闻<br /> 用户讨厌你网站的8大原因</div>
  <div>提高网站收录率的7个细节</div>
  <div>网站备案期间不用关闭网站的8</div>
  <div>网站高跳出率太高的优化方案</div>
  </div>
</div>

<script>
window.onload = function() {
    var oDiv = document.getElementById("tab");
    var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li");
    var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div");
    var timer = null;
    for (var i = 0; i < oLi.length; i++) {
        oLi[i].index = i;
        oLi[i].onmouseover = function() {
            show(this.index);
        }
    }
    function show(a) {
        index = a;
        var alpha = 0;
        for (var j = 0; j < oLi.length; j++) {
            oLi[j].className = "";
            aCon[j].className = "";
            aCon[j].style.opacity = 0;
            aCon[j].style.filter = "alpha(opacity=0)";
        }
        oLi[index].className = "cur";
        clearInterval(timer);
        timer = setInterval(function() {
            alpha += 2;
            alpha > 100 && (alpha = 100);
            aCon[index].style.opacity = alpha / 100;
            aCon[index].style.filter = "alpha(opacity=" + alpha + ")";
            alpha == 100 && clearInterval(timer);
        },
        5)
    }
}
</script>
<!-- 代码 en -->
</body>
</html>

这就是纯js实现的网页tab选项卡切换效果全部内容，你可以复制以上代码直接运行。

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/1231.html