页面载入中,请稍候...

jQuery实现选项卡效果

2012-05-20 14:36:35    作者:user    来源:会员投稿    评论:读取中    点击:读取中    [我要投稿]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta ht...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tab Demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
	jQuery(function($){
		var $li = $('.tabbox>ul>li,.tabbox2>ul>li');
		var $div = $('.tabbox').children('div.tabtext');
		$li.children('a').click(function(e){
			e.stopPropagation();
			e.preventDefault();
		});
		$li.mouseover(function(e){
			$(this).parent().children('li').removeClass('hover');
			$(this).addClass('hover');
			var ref = $(this).children('a').attr('href');
			if(ref!=undefined && ref!=''){
				$(ref).parent().children('div.tabtext').hide();
				$(ref).show();
			}
		});
	});
</script>
<style type="text/css">
* { margin:0;padding:0;}
html,body { font-size:14px;color:#333;background:#FFF;}
.tabbox { width:680px;height:200px;margin:20px auto;border:1px #DDD solid;padding:10px;}
.tabbox ul { list-style-type:none;clear:both;float:none;position:relative;z-index:20;width:100%;margin-left:5px;}
.tabbox ul li { display:block;float:left;height:26px;line-height:26px;padding:0 15px;position:relative;z-index:21;top:1px;}
.tabbox ul li a { text-decoration:none;}
.tabbox ul li.hover { border:1px #999 solid;border-bottom:1px #FFF solid;}
.tabbox .tabtext { display:none;clear:both;float:none;position:relative;z-index:15;border:1px #999 solid;padding:8px;}


.tabbox2 { width:680px;height:auto;margin:20px auto;border:1px #DDD solid;padding:10px;overflow:hidden;zoom:1;}
.tabbox2 ul { list-style-type:none;width:70px;float:left;position:relative;z-index:20;margin-top:8px;}
.tabbox2 ul li { display:block;float:none;clear:both;height:26px;line-height:26px;padding:0 15px;position:relative;z-index:21;left:1px;}
.tabbox2 ul li a { text-decoration:none;}
.tabbox2 ul li.hover { border:1px #999 solid;border-right:1px #FFF solid;}
.tabbox2 .tabtext { display:none;width:480px;height:200px;float:left;position:relative;z-index:15;border:1px #999 solid;padding:8px;}
</style>
</head>
<body>
<div class="tabbox2">
<ul>
<li><a href="#d1">选项1</a></li>
<li class="hover"><a href="#d2">选项2</a></li>
<li><a href="#d3">选项3</a></li>
</ul>
<div id="d1" class="tabtext">
内容1
</div>
<div id="d2" class="tabtext" style="display:block;">
内容2
</div>
<div id="d3" class="tabtext">
内容3
</div>
</div>


<div class="tabbox">
<ul>
<li><a href="#d4">选项1</a></li>
<li class="hover"><a href="#d5">选项2</a></li>
<li><a href="#d6">选项3</a></li>
</ul>
<div id="d4" class="tabtext">
内容1
</div>
<div id="d5" class="tabtext" style="display:block;">
内容2
</div>
<div id="d6" class="tabtext">
内容3
</div>
</div>
</body>
</html>


     

本文版权声明: 全文转载。如果本文或软件侵犯了您的版权,请告之网站管理员。

相关热词搜索:jQuery   选项卡  

上一篇:返回顶部的js实现(jQuery)
下一篇:运用CSS语法美化网页表格标签Table

分享到: 收藏