如何设置TAB标签效果

2016-07-18 16:57:00
GavinHsueh
原创
910

由于页面板块的的需要,我们经常会用到TAB标签卡的效果,节省页面布局空间,下面我们来看一个简单的TAB标签效果:

大家可以在蝉知 系统中创建一个自定义区块,然后把相应的HTML,CSS,JS代码复制进去即可。

HTML:


<div id="tab" style="margin-left:100px;margin-top:20px">
  <div class="tabList">
	<ul>
		<li class="cur">标签1</li>
		<li>标签2</li>
		<li>标签3</li>
		<li>标签4</li>
	</ul>
  </div>
  <div class="tabCon">
	<div class="cur">内容1</div>
	<div>内容2</div>
	<div>内容3</div>
	<div>内容4</div>
  </div>
</div>
CSS:



*{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);
}
JS:



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].onclick = 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)
    }
}
我们来看一下效果:


    下载提示

    我们的下载服务由友情赞助,感谢七牛云的流量支持。

    蝉知使用问题交流,请加官方QQ群:284891062加群请注明暗号:蝉知。

    获取技术支持注意事项:http://www.chanzhi.org/page/qqgroup.html

    欢迎关注我们的微博微信。

    新浪微博:易软天创

    微信公众号:易软天创

    发表评论
    评论通过审核后显示。
    文章分类
    联系我们

    联系人:毕晓敏

    电话:13165056632

    Email:bixiaomin@cnezsoft.com

    QQ:3137772959

    地址:青岛开发区武夷山路167号千禧龙花园 9-1-101室

    联系人:魏中显

    电话:18561939726

    Email:weizhongxian@cnezsoft.com

    QQ:1746749398

    地址:青岛开发区武夷山路167号千禧龙花园 9-1-101室

    联系人:杨苗

    电话:13165050229

    Email:yangmiao@cnezsoft.com

    QQ:3142565561

    地址:青岛开发区武夷山路167号千禧龙花园 9-1-101室