实现tab选项卡功能

最新推荐文章于 2022-06-16 20:53:07 发布

巫祝

最新推荐文章于 2022-06-16 20:53:07 发布

阅读量1.4k

点赞数

分类专栏： web

web 专栏收录该内容

5 篇文章

订阅专栏

这个代码是在网上找的，不过经过自己的修改，应用于yii框架中，其中主要的是tabCon 的position:absolute;需要修改成relative然后才能自适应页面

直接把下面的加入css文件中然后引用就可以了，我把它们放到main.css中


#tab{position:relative;}
div.tableList
{
	border: 1px solid #888888;
    border-collapse: collapse;
    font-family: Arial,Helvetica,sans-serif;
    margin-top: 1px;
}
div.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;
}


div.tabCon{
	position:relative;
	left:-1px;
	top:32px;
	border:1px solid #ccc;
	border-top:none;
	background:#D4D5D5;
	width:600px;
	height:400px;
}
div.tabCon div{
	padding:10px;
	position:relative;
	opacity:0;
	filter:alpha(opacity=0);
}
div.tabList li.cur{
	border-bottom:none;
	background:#fff;
}
div.tabCon div.cur{
	opacity:1;
	filter:alpha(opacity=100);
}

下面是前端html页面：

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab选项卡切换效果</title>
</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">断桥残雪、千百度、幻听、想象之中</div>
	<div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>
	<div>被风吹过的夏天、江南、一千年以后</div>
	<div>十年、K歌之王、浮夸</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>