开启辅助访问
帐号登录 |立即注册

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

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

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。