时时彩开奖号码记录: 如何设置TAB标签效果

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

2017我被时时彩害死了 www.z61ld.com.cn 由于页面板块的的需要,我们经?;嵊玫絋AB标签卡的效果,节省页面布局空间,下面我们来看一个简单的TAB标签效果:

大家可以在 2017我被时时彩害死了系统中创建一个自定义区块,然后把相应的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 , 加群请注明暗号: 蝉知。

获取技术支持注意事项: //www.z61ld.com.cn/page/qqgroup.html

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

新浪微博:易软天创

微信公众号:易软天创

发表评论
评论通过审核后显示。
  • 美司法部认为“邮件门”调查未受政治驱使但存在瑕疵 2019-04-24
  • 法国:马其顿和希腊就国名问题达成协议——欧盟欢迎协议达成  全力配合 2019-04-24
  • 左凌仁的专栏作者中国国家地理网 2019-04-24
  • 生活的印记文章中国国家地理网 2019-04-23
  • 九个字带您感知十九大报告的民生温度 2019-04-23
  • [酷]比西方国家的预约排队制要高明多了! 2019-04-23
  • 爱美TV 带你种草林心如张俪同系列雅萌美容仪 2019-04-22
  • 五莲县政协举行庆改革开放40 周年书画展 2019-04-22
  • 全市公安机关打掉30个涉黑涉恶犯罪团伙 2019-04-21
  • 移植2胚怀5胎 一针减3化风险 十堰市人民医院再创生命奇迹 2019-04-21
  • 【互动话题】我为两会建言献策 2019-04-20
  • 青年创新前沿论坛在海淀创业园成功举办 2019-04-20
  • 苹果看好低价款iPhone X:配备LCD屏 2019-04-19
  • 一只浣熊都这么努力,你还有什么理由不上进! 2019-04-19
  • 彭湃:“农民运动大王”(为了民族复兴·英雄烈士谱) 2019-04-19
  • 778| 965| 578| 910| 183| 745| 970| 606| 809| 858|