你可以下面代碼儲存成js.檔案
//定義全域變數
var timeout;
$(document).ready(function(){
//找到所有的li標籤
$("li").each(function(index){
$(this).mouseover(function(){
//滑動門都要設定一個延遲時間，避免使用者瘋狂移動滑鼠，導致伺服器崩潰，這個很重要
timeout =setTimeout(function(){
$("div.divarea").removeClass("divarea");
$("li.listli").removeClass("listli");
// $("div").eq(index).addClass("divarea"); //另一種寫法是:$(div:eq(index)).addClass("divarea");
$("div:eq("+index+")").addClass("divarea");
$("li").eq(index).addClass("listli");
},
320);
$(this).mouseout(function(){
clearTimeout(timeout);
});
});
});
});
前面html代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>tab </TITLE>
<link rel="stylesheet" type="text/css教程" href="css/tab.css">
<script type="text/javascript教程" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/tab.js"></script>
</HEAD>
<BODY>
<ul id="ularea">
<li class="listli">標籤1</li>
<li >標籤2</li>
<li >標籤3</li>
</ul>
<div class="divarea">內容1</div>
<div>內容2</div>
<div>內容3</div>
</BODY>
</HTML>
把這段代碼儲存成css代碼
ul ,li { margin:0px;
padding:0px;
list-style:none;
}
li { float:left;
background-color:#66CC00;
margin-right:2px; //這個是設定標籤之間的間距
padding:5px;
border:1px solid white;
height:20px;
color:white;
}
.listli { background-color:#663333;
border:1px solid #663333;
}
div { clear:left;
width:300px;
height:100px;
background-color:#663333;
border-top:0px;
color:white;
display:none;
}
.divarea { display:block; }
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
