提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

基于jquery库的tab新形式使用

jQuery 使用 基于 tab 形式
2023-06-13 09:14:41 时间
复制代码代码如下:

<html>
<title>
</title>
<scriptsrc="js/jquery.min.js"type="text/javascript"></script>
<scriptlanguage="javascript"type="text/javascript">
$(document).ready(function(){
$("ul.menuli:first-child").addClass("current");
$("div.content").find("div.layout:not(:first-child)").hide();
$("div.contentdiv.layout").attr("id",function(){returnidNumber("No")+$("div.contentdiv.layout").index(this)});
$("ul.menuli").click(function(){
varc=$("ul.menuli");
varindex=c.index(this);
varp=idNumber("No");
show(c,index,p);
});

functionshow(controlMenu,num,prefix){
varcontent=prefix+num;
$("#"+content).siblings().hide();
$("#"+content).show();
controlMenu.eq(num).addClass("current").siblings().removeClass("current");
};

functionidNumber(prefix){
varidNum=prefix;
returnidNum;
};
});
</script>
<styletype="text/css">
*{margin:0;padding:0}
ul,li{
list-style:none
}
.box{
border:1pxsolid#ccc;
margin:10px;
}
.tagMenu{
height:24px;
position:relative;
border-bottom:1pxsolid#999
}
.tagMenuul{
position:absolute;
bottom:-1px;
height:26px;
}
ul.menuli{
float:left;
border-left:1pxsolid#999;
padding:012px;
cursor:pointer
}
ul.menuli.current{
border:1pxsolid#999;
border-bottom:none;
background:#fff;
height:25px;
line-height:26px;
margin:0
}
.content{padding:10px}
</style>
<body>
<divclass="box">
<divclass="tagMenu">
<ulclass="menu">
<li>Label1.1</li>
<li>Label1.2</li>
<li>Label1.3</li>
<li>Label1.4</li>
</ul>
</div>
<divclass="content">
<divclass="layout">infomation1.1</div>
<divclass="layout">infomation1.2</div>
<divclass="layout">infomation1.3</div>
<divclass="layout">infomation1.4</div>
</div>
</div>
</body>
</html>

相关文章