jquery Tab标签页

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab标签页</title>
<script src="jQuery/jquery-2.1.1.min.js">
</script>
<style>
*{
	padding:0;
	margin:0;
}
body{
	margin-left:50px;
	margin-top:50px;
}
ul{list-style-type:none;}
#ul{
	height:30px;
	margin-bottom:10px;
}
#ul li{
	height:30px;
	line-height:30px;
	padding:0 15px;
	border:1px solid #abcdef;
	float:left;
	margin-right:5px;
	cursor:pointer;
}
#ul li.current{
	background:#abcdef;
}
#content div{
	width:260px;
	height:250px;
	border:1px solid #abcdef;
	display:none;
}
#content div.show{
	display:block;
}
</style>
</head>
<body>
	<ul id="ul">
    	<li class="current">javascript</li>
        <li>jquery</li>
        <li>php</li>
    </ul>
    <div id="content" >
    	<div class="show">JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。于1995年由Netscape公司的				Brendan Eich首次设计实现而成。由于Netscape公司与Sun公司合作,Netscape高层希望它看上去能够像Java,因此取名为JavaScript。
        </div>
        <div>Jquery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器,jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
        </div>
        <div> PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比,PHP是将程序嵌入到HTML(标准通用标记语言下的一个应用)文档中去执行,执行效率比完全生成HTML标记的CGI要高许多;PHP还可以执行编译后代码,编译可以达到加密和优化代码运行,使代码运行更快。
        </div>
    </div>
    
    <script>
		$("#ul li").mouseover(function(){
			//1.点击li的时候要切换样式
			$(this).addClass('current').siblings().removeClass('current');
			//2.根据li的索引值,来确定哪个div显示,其他div
			$('#content>div').eq($(this).index()).show().siblings().hide();
		});
	</script>
</body>
</html>

加油!自己!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值