JQ选项卡实列<style>
#div1 div{ width:200px; height:200px; border:1px red solid; display:none;}
.active{ background:red;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
$(‘#div1‘).find(‘input‘).click(function(){
$(‘#div1‘).find(‘input‘).attr(‘class‘,‘‘);
$(‘#div1‘).find(‘div‘).css(‘display‘,‘none‘);
$(this).attr(‘class‘,‘active‘);
$(‘#div1‘).find(‘div‘).eq( $(this).index() ).css(‘display‘,‘block‘);
});
});
</script>
</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>
</html>
JQ下的常用方法
- addClass() removeClass()
- width() innerWith() outerWidth()
- insertBefore() before()
- insertAfter() after()
- appendTo() append()
- prependTo() prepend()
- remove()
- on() off()
- scrollTop()
- addClass() removeClass() 添加样式和删除样式
- width() innerWith() outerWidth()
时间： 2024-10-09 14:15:42