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

今天给大家分享一款非常简单实用的JS网页tab选项卡切换效果,当鼠标放到不同的标签项上或单击该栏目标签会显示不同的内容。

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

如下图:

简单实用的网页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

(0)
江山如画的头像江山如画管理团队
上一篇 2018年2月11日 上午10:12
下一篇 2018年2月12日 上午11:29

99%的人还看了以下文章

  • jQuery插件实现省、市、区县三级联动代码,调用非常简单

    在《中国省、市区二级联动下拉选择框-JS源码》文章中我们分享了省、市区二级联动的JS实现代码,今天125建站网给大家分享一款中国省、市、区县三级联动的代码,通过jQuery插件实现,调用非常简洁。 HTML结构 基本的HTML结构是使用一个<div>容器来包裹一组<select>元素。 <div><!– conta…

    2019年6月5日
    3.5K0
  • 立体动画按钮、切换开关

    实例名称:立体动画按钮、切换开关在线预览:https://codepen.io/chrisgannon/pen/ZaPmKp HTML代码: <div id=”app”></div> CSS代码: body { background-color:#FFFCF9; overflow: hidden; text-align:center;…

    2019年10月17日
    1.6K0
  • 超酷的HTML5 3D图片旋转动画特效

    中国网页设计分享的一款HTML5 3D图片动画特效,使用js动画框架TweenMax 技术实现。 这款HTML5 3D动画非常酷,当在图片上面拖动鼠标时,图片会在垂直方向分裂出数块小长方体,然后每一个小长方体沿着鼠标拖动的方向旋转。 效果演示      源码下载

    2018年9月28日
    3.4K0
  • 鼠标指向图片实现放大效果-CSS3特效

    鼠标指向图片实现放大效果,多用于产品展示,可以通过Js,jquery来实现。为更好的优化网站,最好的方法还是纯css来实现。纯css实现鼠标指向图片放大效果|www.125jz.com

    2018年7月14日
    1.9K0
  • 纯CSS制作三级导航菜单

    本文分享如何使用纯CSS制作三级导航菜单,优点:代码简洁,速度快。 HTML代码: <!–代码部分begin www.125jz.com–> <div class=”menu”> <ul class=”nav1″> <li class=”li1″><a href=”http://www.125jz.c…

    2018年8月2日
    2.4K0
  • Marquee标签实现跑马灯、滚动公告、通知效果

    1.Marquee基本语法 <marquee> … </marquee> 实例演示:会移动的文字(Marquee) <marquee>啦啦啦,我会移动耶!</marquee> 2.文字移动属性 (1)方向 :direction=# #=left, right,up,down 例: <marqu…

    2019年2月26日
    7.7K0

发表回复

登录后才能评论