超简单的javascript+CSS滑动门

2019-11-01 14:45:28　

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="超简单的javascript+CSS滑动门" />
<meta name="description" content="超简单的javascript+CSS滑动门" />
<title>很多人想要的最简单的CSS滑动门</title>
<style type="text/css" media="all">
.info {
BACKGROUND-COLOR: #fff;
margin:0 auto;
FLOAT:auto;
WIDTH: 650px;
BORDER:#ace 1px solid;
}
.m_tit, .m_ma, .m_m {
FLOAT: left;
LINE-HEIGHT: 25px;
WIDTH: 74px;
HEIGHT: 25px;
TEXT-ALIGN: center;
FONT-SIZE: 14px;
BORDER:#ace 0px solid;
}
.m_tit {
BACKGROUND-COLOR:#f4faff;
BORDER-BOTTOM-WIDTH: 1px;
}
.m_ma {
BACKGROUND-COLOR: #fff;
FONT-WEIGHT: bold;
BORDER-LEFT-WIDTH: 1px;
color:#f00;
}
.m_m {
BACKGROUND-COLOR: #f4faff;
BORDER-LEFT-WIDTH: 1px;
BORDER-BOTTOM-WIDTH: 1px;
CURSOR: pointer;
}
</style>
<SCRIPT type=text/javascript>
function tabit(tabName,btnId,tabNumber){
for(i=0;i<tabNumber;i++){
document.getElementById(tabName+"_div"+i).style.display = "none";
document.getElementById(tabName+"_btn"+i).className = "m_m";
}
document.getElementById(tabName+"_div"+btnId).style.display = "block";
document.getElementById(tabName+"_btn"+btnId).className = "m_ma";
}
</SCRIPT>
</head>
<body>
<div class="info">
<div style="HEIGHT: 30px">
<div class="m_tit" style="WIDTH: 47px">请选择</div>

<div class="m_ma" id="tab01_btn0" onMouseOver="tabit(’tab01’,0,8)">一</div>
<div class="m_m" id="tab01_btn1" onMouseOver="tabit(’tab01’,1,8)">二</div>
<div class="m_m" id="tab01_btn2" onMouseOver="tabit(’tab01’,2,8)">三</div>
<div class="m_m" id="tab01_btn3" onMouseOver="tabit(’tab01’,3,8)">四</div>
<div class="m_m" id="tab01_btn4" onMouseOver="tabit(’tab01’,4,8)">五</div>
<div class="m_m" id="tab01_btn5" onMouseOver="tabit(’tab01’,5,8)">六</div>
<div class="m_m" id="tab01_btn6" onMouseOver="tabit(’tab01’,6,8)">七</div>
<div class="m_m" id="tab01_btn7" onMouseOver="tabit(’tab01’,7,8)">八</div>
</div>
<div style="PADDING-BOTTOM: 5px; PADDING-TOP: 5px; HEIGHT: 158px">
<div id="tab01_div0" style="BORDER-TOP-STYLE: none">主</div>
<div id="tab01_div1" style="DISPLAY: none; BORDER-TOP-STYLE: none">一</div>
<div id="tab01_div2" style="DISPLAY: none; BORDER-TOP-STYLE: none">二</div>
<div id="tab01_div3" style="DISPLAY: none; BORDER-TOP-STYLE: none">三</div>
<div id="tab01_div4" style="DISPLAY: none; BORDER-TOP-STYLE: none">四</div>
<div id="tab01_div5" style="DISPLAY: none; BORDER-TOP-STYLE: none">五</div>
<div id="tab01_div6" style="DISPLAY: none; BORDER-TOP-STYLE: none">六</div>
<div id="tab01_div7" style="DISPLAY: none; BORDER-TOP-STYLE: none">七</div>
</div>
</div>
</body>
</html>

javascript、css、滑动门