自己的一个鼠标滑动选项卡函数,可用这个网址预览
http://www.5dworld.net/js/jsoption.html
<!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=gb2312" />
<title>鼠标滑动选项卡</title>
<style type="text/css">
/*清楚列表默认样式*/
#mmoption{margin:0; padding:0; list-style-type:none}
/*让列表横排*/
#mmoption li{float:left;}
/*选中项的样式*/
.mmoptionA
{
background:url(campus3_e01.gif) no-repeat center;
width:84px;height:16px;
text-align:center;
color:#408C3F;font-weight:600;font-size:12px;
padding-top:5px;
cursor:pointer
}
/*未选中项的样式*/
.mmoptionB
{
background:url(campus3_e02.gif) no-repeat center;
width:82px;height:16px;
text-align:center;
color:#FFFFFF;font-weight:600;font-size:12px;
padding-top:5px;
cursor:pointer
}
/*内容层样式*/
#showId0,#showId1,#showId2,#showId3,#showId4
{
display:none;clear:left;
width:408px;height:100px;
padding-top:50px;
border-left:solid 1px #408C3F;border-right:solid 1px #408C3F;border-bottom:solid 1px #408C3F;
text-align:center;
margin-left:1px
}
/*#showId0{display:block;}*/
</style>
<script language="javascript">
/********************选项卡函数参数说明*****************************/
optionId:选项条ID
htmlType:html类别,TD 或 LI ,表格制作为TD,列表制作为LI
cssType:样式名称,样式表中应有两个相关样式,
一为选中状态样,一为未选中状态样式,用同一名称加A和B表示,写入这个参数时去掉后面的A或B
showId:显示相关内容的ID名称,参数不显示数字序号,实际HTML中每个ID以数字结尾并以0开始
number:初始被选中的项,一般为0(从0开始)
myevent:事件类型,鼠标经过为"onmouseover",单击为"onclick"
/*******************************************************************/
function MmOption(optionId,htmlType,cssType,showId,number,myevent)
{
document.getElementById(showId+number).style.display="block";
var mmArray=document.getElementById(optionId).getElementsByTagName(htmlType);
for(var i=0;i<mmArray.length;i++)
{
mmArray[i].className=(i==number?cssType+"A":cssType+"B");
mmArray[i][myevent]=function()
{
for(var j=0;j<mmArray.length;j++)
{
if(this!=mmArray[j])
{
mmArray[j].className=cssType+"B";
document.getElementById(showId+j).style.display="none";
}
else
{
mmArray[j].className=cssType+"A";
document.getElementById(showId+j).style.display="block";
}
}
}
}
}
window.οnlοad=function()
{
MmOption("mmoption","li","mmoption","showId",3,"onmouseover");
}
</script>
</head>
<body>
<ul id="mmoption">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
</ul>
<div id="showId0">选项1</div>
<div id="showId1">选项2</div>
<div id="showId2">选项3</div>
<div id="showId3">选项4</div>
<div id="showId4">选项5</div>
</body>
</html>
