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

zl程序教程

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

当前栏目

JQuery选项卡效果(JS与HTML的分离)

jQueryJSHTML 效果 分离 选项卡
2023-06-13 09:14:17 时间
在实际应用过程中，只要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。
Javascript（jquery）代码如下：
复制代码代码如下:

<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>

CSS样式代码如下：
复制代码代码如下:

<styletype="text/css">
*{margin:0;padding:0}
ul,li{list-style:none}
.box{width:450px;height:150px;border:1pxsolid#ccc;margin:10px;font-size:12px;font-family:Verdana,Arial,Helvetica,sans-serif}
.tagMenu{height:28px;line-height:28px;background:#efefef;position:relative;border-bottom:1pxsolid#999}
.tagMenuh2{font-size:12px;padding-left:10px;}
.tagMenuul{position:absolute;left:100px;bottom:-1px;height:26px;}
ul.menuli{float:left;margin-bottom:1px;line-height:16px;height:14px;margin:5px00-1px;border-left:1pxsolid#999;text-align:center;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>

HTML结构代码如下：
复制代码代码如下:
<body>
<divclass="box">
<divclass="tagMenu">
<h2>No.1Menu</h2>
<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>
<divclass="box">
<divclass="tagMenu">
<h2>No.2Menu</h2>
<ulclass="menu">
<li>Label2.1</li>
<li>Label2.2</li>
<li>Label2.3</li>
<li>Label2.4</li>
</ul>
</div>
<divclass="content">
<divclass="layout">infomation2.1</div>
<divclass="layout">infomation2.2</div>
<divclass="layout">infomation2.3</div>
<divclass="layout">infomation2.4</div>
</div>
</div>
</body>

相关文章