思想：首先定義三個選項卡，可以用任何標簽，只要如下圖，
一共有三個ul，第一個ul給一個class，因為默認第一個選項卡的內容顯示出來，
其他兩個ul display：none；
當我鼠標移到第二個第三個選項卡的時候，刪除第一個選項卡的class，鼠標移到哪里就給哪個選項卡那個class
思路就這樣
下面是完全的代碼
最好自己寫寫，然后參考自己下面的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;}
#content{margin:0 auto;width:600px;border:1px #000 solid;}
#tabs{height:30px;background:black;overflow:hidden;position:relative;}
#tabs #state{
display:block;
top:0;right:0;
width:30px;height:30px;
font-size:24px;
font-weight:700;
text-align:center;
color:#fff;
cursor:pointer;
position:absolute;
}
#tabs li{
display:inline; /**/
padding:0 8px;
line-height:30px;
color:#fff;
list-style:none;
cursor:pointer;
float:left;
}
#tabs .active{color:#000;background:#fff;}
#list {padding:10px 0;}
#list ul{margin:0 25px;display:none;}
#list ul li{height:25px;line-height:25px;}
#list .active{display:block;}
</style>
</head>
<body>
<script>
window.onload=function()
{
var $ =function(ids)
{
return document.getElementById(ids);
}
var tabs= $("tabs").getElementsByTagName("li");
var state = $("state");
var list = $("list");
var ul = list.getElementsByTagName("ul");
for(var i=0;i<tabs.length;i++)
{
tabs[i].index=i;
tabs[i].onmouseover=function()
{
for(var i=0;i<tabs.length;i++)
{
tabs[i].className=ul[i].className='';
}
this.className=ul[this.index].className="active";
}
}
//方法2
// for(var i=0;i<tabs.length;i++)
// {
// (
// function(index)
// {
// tabs[index].onmouseover=function()
// {
// for(var j=0;j<tabs.length;j++)
// {
// tabs[j].className=ul[j].className='';
// }
// this.className=ul[index].className="active";
// }
// }
// )(i) ;
// }
//方法1
// function clearEvent(index)
// {
// tabs[index].onmouseover=function()
// {
// for(var j=0;j<tabs.length;j++)
// {
// tabs[j].className=ul[j].className='';
// }
// this.className=ul[index].className="active";
// }
// }
//加號位置的收縮
state.onclick = function()
{
var text = this.innerHTML;
if( text == "+")
{
this.innerHTML="-";
list.style.display="block";
}
else
{
this.innerHTML="+";
list.style.display="none";
}
}
}
</script>
<div id="content">
<div id="tabs">
<ul>
<li class="active">暴給力</li>
<li>職業指導</li>
<li>充電區</li>
</ul>
<span id="state">-</span>
</div>
<div id="list">
<ul class="active">
<li>IE6 PNG 解決方案合集</li>
<li>firefox下輸入框innerHtml問題</li>
<li>精品菜單導航，多年精心收集整理上上品菜單</li>
<li>60個WEB使用效果集合</li>
<li>CSS3動態按鈕導航集錦</li>
<li>Html 5 的革新,結構之美</li>
<li>javascript高級程序設計</li>
<li>w3cfuns我愛你</li>
<li>高性能網站建設指南</li>
<li>罕見的皮具拉鏈效果博客</li>
<li>基礎5塊狀元素的內聯元素</li>
<li>羊癲瘋的純css下拉導航原理</li>
<li>請問這個排序功能如何實現？</li>
<li>分享10個便利的html5/css3框架</li>
<li>白鷺ersonal申請熱血活動板塊版主</li>
<li>web前端標准在哥哥瀏覽器中的差異</li>
</ul>
<ul>
<li>騰訊面試題</li>
<li>近期面試感受</li>
<li>騰訊實習生web前端js開發工程師面試經歷</li>
<li>阿里巴巴web前端開發面試題</li>
<li>網易頁面重構面試題</li>
<li>網易web前端開發師面試回答的經歷</li>
<li>2001騰訊前端面試稿</li>
<li>alibaba web前段開發工程師面試奇遇記</li>
<li>特訓實習生網頁重構組招聘公開試題</li>
<li>求職記--記錄成為面霸的全過程</li>
<li>淘寶web前端開發面試經歷</li>
<li>百度前端面試題對話記錄</li>
<li>2011年最新百度前端開發面試經歷</li>
<li>去tx的事基本黃了，題我發出來</li>
<li>俺們公司的面試題</li>
</ul>
<ul>
<li>厘米IT學院第89期</li>
<li>厘米IT學院第88期</li>
<li>厘米IT學院第87期</li>
<li>厘米IT學院第86期</li>
<li>厘米IT學院第85期</li>
<li>厘米IT學院第84期</li>
<li>厘米IT學院第83期</li>
</ul>
</div>
</div>
</body>
</html>