用background-position属性做div选项卡
发布时间：2016年2月25日 作者：未知 查看次数：2202
div选项卡 <!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>
<title>div选项卡</title>
<meta charset="gb2312" />
<style>
.tabBgHead {
FONT-SIZE: 12px; WIDTH: 100%; CURSOR: pointer; LINE-HEIGHT: 27px; HEIGHT: 27px;
}
.tabStyHead1 {
FLOAT: left; WIDTH: 100px; CURSOR: pointer; COLOR: #ff0000; LINE-HEIGHT: 27px; HEIGHT: 27px; TEXT-ALIGN: center;
}
.tabStyHead2 {
FLOAT: left; WIDTH: 100px; CURSOR: pointer; COLOR: #00ffff; LINE-HEIGHT: 27px; HEIGHT: 27px; TEXT-ALIGN: center;
}
</style>
</head>
<body>
<DIV class=tabBgHead style="background:url(Head.png);background-Position:0px 0px;" id=tabbg1>
<DIV class=tabStyHead1 id=tabHeadName1 onmouseover="selectFunc(1);" onmousedown="document.location='1.htm'">选项卡栏目</DIV>
<DIV class=tabStyHead2 id=tabHeadName2 onmouseover="selectFunc(2);" onmousedown="document.location='2.htm'">选项卡栏目2</DIV>
<DIV class=tabStyHead2 id=tabHeadName3 onmouseover="selectFunc(3);" onmousedown="document.location='3.htm'">选项卡栏目3</DIV>
</DIV>
<DIV id=tabDivBody1>
卡一
</DIV>
<DIV id=tabDivBody2 style="DISPLAY: none">
卡二
</DIV>
<DIV id=tabDivBody3 style="DISPLAY: none">
卡三
</DIV>
<SCRIPT type=text/javascript>
function selectFunc ( i )
{
document.getElementById("tabDivBody1").style.display="none";
document.getElementById("tabHeadName1").className='tabStyHead2';
document.getElementById("tabDivBody2").style.display="none";
document.getElementById("tabHeadName2").className='tabStyHead2';
document.getElementById("tabDivBody3").style.display="none";
document.getElementById("tabHeadName3").className='tabStyHead2';
switch(i){
case 1:
document.getElementById("tabDivBody1").style.display="block";
document.getElementById("tabHeadName1").className='tabStyHead1';
document.getElementById('tabbg1').style.backgroundPosition='0px 189px';
break;
case 2:
document.getElementById("tabDivBody2").style.display="block";
document.getElementById("tabHeadName2").className='tabStyHead1';
document.getElementById('tabbg1').style.backgroundPosition='0px 162px';
break;
case 3:
document.getElementById("tabDivBody3").style.display="block";
document.getElementById("tabHeadName3").className='tabStyHead1';
document.getElementById('tabbg1').style.backgroundPosition='0px 135px';
break;
}
}
</SCRIPT>
</body>
</html>关于js改变background-position属性，在Opera浏览器中可以用['background-position']：<br> document.getElementById('bg1').style.['background-position']<br> 在IE浏览器中只能是document.getElementById('bg1').style.backgroundPosition。 |
||||||
|
||||||
