<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf8" />
<title>简洁Tab</title>
<script src="http://www.powerbankpcba.com//templates/jscript/jquery.js" type="text/javascript"></script>
<style type="text/css">
.text_pro{ background:none;color:#333; font-family:"微软雅黑";}
.imging{ background:url(../images/product_tit_hover.jpg) no-repeat center; color:#ff0000;}
.pro_con{display:none;}
.pro_cont{}
</style>
<script language="javascript" type="text/javascript">
function news(ten,one){
for(var i=0;i<2;i++){document.getElementById("con_"+ten+i).style.display="none";}
for(var i=0;i<2;i++){document.getElementById("tit_"+ten+i).className="text_pro";}
document.getElementById("tit_"+ten+one).className="imging";
document.getElementById("con_"+ten+one).style.display="block";
}
$(function(){
for(h=0;h<2;h++){
$(".index_pro_tit a").eq(h).attr("onmouseover","setTimeout('news(2,"+h+")','100')");
};
})
</script>
</head>
<body>
<div class="index_pro_tit">
<a class="text_pro imging" id="tit_20" href="#">Tab1</a>
<a class="text_pro" id="tit_21" href="#">Tab2</a>
</div>
<div class="index_pro_con">
<div class="pro_cont" id="con_20">
测试内容1,在Tab1下
</div>
<div class="pro_con" id="con_21">
测试内容2,在Tab2下
</div>
</div>
</body>
</html>
JS实现tab标签功能
最新推荐文章于 2022-05-28 11:53:17 发布