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>
加油！自己！
类似资料：