网页选项卡

图示：

代码：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab</title>
<script type="text/javascript" src="scripts/jquery-1.3.1.js"></script>
<style type="text/css">
/* tab样式表 */
*{
	margin:0;
	padding:0;
	}
body{
	font: 12px/19px Arial, Helvetica, sans-serif; color:#666;}
.tab{
	width:240px;
	margin:50px;
 	}
.tab_menu{ clear:both;}
.tab_menu li{
	float:left;
	margin-right:4px;
	list-style:none;
	border: 1px solid #898989;
	background::#F1F1F1;
	text-align:center;
	padding:1px 6px;
	cursor:pointer;
	}
.tab_menu li.hover { background:#DFDFDF;}
.tab_menu li.selected { color:#FFF; background:#6D84B4;}

.tab_box { clear:both; border:1px solid #898989; height:100px;}
.hide{
	display:none;
	}

</style>
 <script type="text/javascript">
	$(function(){
		var $div_li = $(".tab_menu ul li");
		$div_li.click(function(){
			$(this).addClass("selected")	//当前<li>元素高亮
				.siblings().removeClass("selected");	//去除其它同辈<li>元素高亮显示
			var index = $div_li.index(this);	//获取当前点击的li在全部<li>中的索引
			$(".tab_box > div")	//选取子节点
				.eq(index).show()	//显示li元素对应的div元素
				.siblings().hide();	//隐藏li同辈元素对应的div元素
		}).hover(function(){
			$(this).addClass("hover");
		},function(){
			$(this).removeClass("hover");
		})
	})	
</script>
</head>

<body>
	<div class="tab">
    <div class="tab_menu">
    	<ul>
        	<li class="selected">时事</li>
            <li>体育</li>
            <li>新闻</li>
        </ul>
    </div>
    <div class="tab_box">
    	<div>时事</div>
    	<div class="hide">体育</div>
    	<div class="hide">新闻</div>
    </div>
    </div>
</body>
</html>

　源码下载：

posted @ 2012-10-23 11:06  -禅意花园-  Views(255)  Comments(0)    收藏  举报