jquery div tab标签切换

最新推荐文章于 2021-10-08 11:51:50 发布

弘里木扇

最新推荐文章于 2021-10-08 11:51:50 发布

阅读量3.4k

点赞数

分类专栏： JQuery 文章标签： jquery div function layer xhtml html

本文链接：https://blog.csdn.net/xinguojava/article/details/6411625

版权

JQuery 专栏收录该内容

0 篇文章

订阅专栏

实用的div tab标签切换显示代码，可在页面里通用，只不过页面的设计需要遵循下面例子的样式来设计

function changeTab(tabDiv,obj,str,eachDivId,blockTabStyle,noneTabStyle){

$("#"+tabDiv+" a").each(function(c,t){
if(t.id.toLowerCase()== obj.toLowerCase())
$("#"+ obj).attr("className",blockTabStyle);
else
$("#"+ t.id).attr("className",noneTabStyle);
});
var divid= str+obj;
$("#"+ eachDivId +" div").each(function(i,item){
if(divid.toLowerCase() == item.id.toLowerCase()){
$("#"+ obj).show();
}
else{
$("#"+ item.id).hide();
}

});

}

html 测试代码：需要引用JQUERY

<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="public/js/jquery-1.4.min.js"></script>
<style type="text/css">
.a{ font-size:12px; color:#000}
.b{ font-size:12px; color:#06F; font-weight:bold;}
</style>

</head>

<body>
<div id="layer1"><a href="#" οnclick="changeTab('layer1',this.id,'str','y','b','a')" id="l1">1</a><a href="#" id="l2" οnclick="changeTab('layer1',this.id,'str','y','b','a')">2</a><a href="#" id="l3" οnclick="changeTab('layer1',this.id,'str','y','b','a')">3</a></div>

<div id="y">
<div id="strl1" style="display:none;">a</div>
<div id="strl2" style="display:none;">b</div>
<div id="strl3" style="display:none;">c</div>
</div>
</body>
</html>