用JQuery做的一个选项卡代码案例

admin · 2022-8-21 22:22:19

1、HTML结构部分
<head>
<meta http-equiv= "Content -Type" content="text/html;
charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 div{ width: 200px; height :200px; border:1px red solid;
display: none; }
.active{ background: red; }
I
</style>
< /head>
<body>
<div id="div1">
<input class="active" type= "button" value="1"
/>
<input type= "button" value="2" />
<input type="button" value="3" />
<div style="display:block">111111</div>
<div>222222</div>
<div>333333</div>
</div>
</body>

2、实现选项卡的JQ代码部分
<script type="text/javascript" src="jquery-1.10.1.min.js">
</script>
<script>
$ (function() {
$('#div1') .find('input') .click (function() {
$('#divl') . find (' input') .attr('class', '');
$('#div1') . find('div') .css('display', 'none');
$ (this) .attr('class', 'active') ;
$('#div1') . find('div') .eq( $(this) .index() ) .css(
'display', 'block');
});
</script>

		自动登录	找回密码
密码			立即注册

用JQuery做的一个选项卡代码案例

0 个回复

快速回复

admin

楼主热帖

标签云

艾Q网