jquery Tab标签页

最新推荐文章于 2024-01-09 16:02:28 发布

技术宅--火狼

最新推荐文章于 2024-01-09 16:02:28 发布

阅读量1k

点赞数 1

分类专栏： web前端文章标签： tab jquery html5

本文链接：https://blog.csdn.net/huolang_vip/article/details/38855433

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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>

加油！自己！

技术宅--火狼

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery Tab标签页

tab标签页*{ 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
复制链接

扫一扫