选项卡二

简洁的代码实现选项卡切换效果：
<!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>无标题文档</title>
<style>
*{margin:0;padding:0}
.notice{
	height:98px; 
	298px; 
	border:1px solid #eee; 
	overflow:hidden;
	}
.notice-tit{ 
	height:27px; 
	position:relative; 
	}
.notice-tit ul{
	list-style:none;
	position:absolute;
	301px;
	left:-1;
	}
.notice-tit ul li{
	float:left;
	58px; 
	height:26px; 
	padding:0 1px;
	text-align:center;
	line-height:26px;
	overflow:hidden; 
	background:#F7F7F7;
	border-bottom:1px solid #eee;
	}
.notice-tit ul li.select{
	background:#fff;
	border-bottom-color:#fff;
	border-left:1px solid #eee;
	border-right:1px solid #eee;
	padding:0;
	}
.notice ul li a:link,.notice ul li a:visited{
	text-decoration:none;
	color:#000;
	}
.notice ul li a:hover{
	color:#f90;
	}
.notice-con .mod{
	margin:10px 15px;
	}
.notice-con .mod ul li{
	float:left;
	134px;
	height:25px;
	overflow:hidden;
	}
</style>
<script>
function $(id){
	return typeof id === 'string'?document.getElementById(id):id;
	} 
window.onload = function(){
	//获取鼠标滑过或点击的标签和要切换内容的元素
	var titles=$('notice-tit').getElementsByTagName('li');	
	    divs=$('notice-con').getElementsByTagName('div');
	if(titles.length != divs.length)
	return;
	//遍历titles下的全部li
	for(var i=0;i<titles.length;i++){
		titles[i].id=i;
		titles[i].onmouseover=function(){
			//清除li上的class
			for(var j=0;j<titles.length;j++){
				titles[j].className='';
				divs[j].style.display = 'none';
			}
			//设置当前高亮显示
			this.className='select';
			divs[this.id].style.display = 'block';
		}
	}
}
</script>
</head>

<body>
<div id="notice" class="notice">
	<div id="notice-tit" class="notice-tit">
    	<ul>
        	<li class="select"><a href="#">简单介绍</a></li>
            <li><a href="#">简单介绍</a></li>
            <li><a href="#">简单介绍</a></li>
            <li><a href="#">简单介绍</a></li>
            <li><a href="#">简单介绍</a></li>
        </ul>
    </div>
    <div id="notice-con" class="notice-con" >
    	<div class="mod" style="display:block">
    	<ul>
    		<li><a href="#">编写菜单效果1</a></li>
            <li><a href="#">编写菜单效果</a></li>
            <li><a href="#">编写菜单效果</a></li>
            <li><a href="#">编写菜单效果</a></li>
        </ul>
        </div>
        <div class="mod" style="display:none">
    	<ul>
    		<li><a href="#">编写菜单效果2</a></li>
            <li><a href="#">编写菜单效果</a></li>
            <li><a href="#">编写菜单效果</a></li>
            <li><a href="#">编写菜单效果</a></li>
        </ul>
        </div>
        <div class="mod" style="display:none">
    	<ul>
    		<li><a href="#">编写菜单效果3</a></li>
            <li><a href="#">编写菜单效果</a></li>
            <li><a href="#">编写菜单效果</a></li>
            <li><a href="#">编写菜单效果</a></li>
        </ul>
        </div>
        <div class="mod" style="display:none">
    	<ul>
    		<li><a href="#">编写菜单效果4</a></li>
            <li><a href="#">编写菜单效果</a></li>
            <li><a href="#">编写菜单效果</a></li>
            <li><a href="#">编写菜单效果</a></li>
        </ul>
        </div>
        <div class="mod" style="display:none">
    	<ul>
    		<li><a href="#">编写菜单效果5</a></li>
            <li><a href="#">编写菜单效果</a></li>
            <li><a href="#">编写菜单效果</a></li>
            <li><a href="#">编写菜单效果</a></li>
        </ul>
        </div>
        
    </div>
</div>
</body>
</html>