用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

刚接触JQ不久,练手的第一个选项卡

2016-08-26 作者: afei举报

[javascript]代码库

<style><!--
body{margin:50px 50px;padding:0;}
.xxk{}
.xxk ul{color:#fff;text-align:center;line-height:30px;margin:0;padding:0;}
.xxk ul li{list-style:none;width:100px;background:#000; cursor:pointer;}
.xxk ul li.active{background:red;color:#000;}
.xxk ul li div{background:#fff;border:1px solid #000;display:none;}

.hello{border:1px solid #000;width:100px;}
.hello div{display:none;line-height:30px;width:100px;}
--></style>
<p>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">// <![CDATA[
$(function(){
		$('.xxk ul li').click(function(){
			$(this).addClass('active').siblings().removeClass('active');
			var index=$('.xxk ul li').index(this);
			
			$('li').not('active').find('div').stop().slideUp();
			$('.xxk div').eq(index).slideDown();
			})
		
		
	})
// ]]></script>
</p>
<p>写的效果出来了,新手,请各位大神多多指教小辈</p>
<div class="xxk">
<ul>
<li class="active">选项卡1
<div style="display: block;">选项卡1选项</div>
</li>
<li>选项卡2
<div>选项卡2选卡2选项卡2</div>
</li>
<li>选项卡3
<div>选项卡卡3</div>
</li>
<li>选项卡4
<div>选项卡4</div>
</li>
</ul>
</div>

[代码运行效果截图]


刚接触JQ不久,练手的第一个选项卡

[源代码打包下载]




网友评论    (发表评论)

共1 条评论 1/1页

发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...