css+javascript实现鼠标点击后状态不变

网站一般都有比较漂亮的导航菜单，尤其是当鼠标经过时发生的激活变化。唯一遗憾的就是，这种状态在点击后就消失了。需要重新将鼠标移动其上进行激活。为了解决这点遗憾，经过两天的试验，终于找到一条实现方法。这是用javascript加css来实现的。

首先说明，该段代码是在一个页面内实现的。也就是，所有内容均在一个页面内进行调用。做为一个小栏目的导航还是很不错的。代码很少，却很实用，还是先看看代码。

<div id=”headerdi”><div>
<div id=”neirongmu1″ onclick=”neirong(1)”>1</div>
<div id=”neirongmu2″ onclick=”neirong(2)”>2</div>
<div id=”neirongmu3″ onclick=”neirong(3)”>3</div>
<div id=”neirongmu4″ onclick=”neirong(4)”>4</div>
<div id=”neirongmu5″ onclick=”neirong(5)”>5</div>
<div id=”neirongmu6″ onclick=”neirong(6)”>6</div>
<div id=”neirongmu7″ onclick=”neirong(7)”>7</div>
<div id=”neirongmu8″ onclick=”neirong(8)”>8</div>
<div id=”neirongmu9″ onclick=”neirong(9)”>9</div>

<SCRIPT LANGUAGE=”JavaScript”>
<!–
function neirong(t){
for(var i=1;i<10 ;i++ ){
if(i==t){
document.getElementById(“neirong”+i).style.display=”;
if(i==t){
document.getElementById(“neirongmu”+i).className=(“tiao”+i+”p”+i);
}else{
document.getElementById(“neirongmu”+i).className=(“tiao”+i);
}
}else{
document.getElementById(“neirong”+i).style.display=’none’;
if(i==9){
document.getElementById(“neirongmu”+i).className=(“tiao”+i);
}else{
document.getElementById(“neirongmu”+i).className=(“tiao”+i);
}
}
}
}
neirong(1);
//–>
</SCRIPT>
</div>
</div>

<div id=”neirong1″>
1

</div>

<div id=”neirong2″ style=”display:none;”>
2
</div>

<div id=”neirong3″ style=”display:none;”>
3
</div>

<div id=”neirong4″ style=”display:none;”>
4
</div>

<div id=”neirong5″ style=”display:none;”>
5
</div>

<div id=”neirong6″ style=”display:none;”>
6
</div>

<div id=”neirong7″ style=”display:none;”>
7
</div>

<div id=”neirong8″ style=”display:none;”>
8
</div>

<div id=”neirong9″ style=”display:none;”>
9
</div>

css代码部分：

#headerdi{width:100%;height:35px;margin:0px;}
.headerdi{position:absolute;width:940px;height:35px;margin:0 auto;top:155px;}
.headerdi .tiao1{position:absolute;left:21px;background:url(zhunbei_an.gif) no-repeat;width:112px;height:35px;z-index:9;}
.headerdi .tiao2{position:absolute;left:119px;background:url(huaiyun_an.gif) no-repeat;width:112px;height:35px;z-index:8;}
.headerdi .tiao3{position:absolute;left:217px;background:url(fenmian_an.gif) no-repeat;width:112px;height:35px;z-index:7;}
.headerdi .tiao4{position:absolute;left:315px;background:url(yuezi_an.gif) no-repeat;width:112px;height:35px;z-index:6;}
.headerdi .tiao5{position:absolute;left:413px;background:url(xinsheng_an.gif) no-repeat;width:112px;height:35px;z-index:5;}
.headerdi .tiao6{position:absolute;left:511px;background:url(01_an.gif) no-repeat;width:112px;height:35px;z-index:4;}
.headerdi .tiao7{position:absolute;left:609px;background:url(13_an.gif) no-repeat;width:112px;height:35px;z-index:3;}
.headerdi .tiao8{position:absolute;left:707px;background:url(35_an.gif) no-repeat;width:112px;height:35px;z-index:2;}
.headerdi .tiao9{position:absolute;left:805px;background:url(shaoer_an.gif) no-repeat;width:112px;height:35px;z-index:1;}

.headerdi .tiao1p1{position:absolute;left:21px;background:url(zhunbei_liang.gif) no-repeat;width:112px;height:35px;z-index:11;}
.headerdi .tiao2p2{position:absolute;left:119px;background:url(huaiyun_liang.gif) no-repeat;width:112px;height:35px;z-index:10;}
.headerdi .tiao3p3{position:absolute;left:217px;background:url(fenmian_liang.gif) no-repeat;width:112px;height:35px;z-index:9;}
.headerdi .tiao4p4{position:absolute;left:315px;background:url(yuezi_liang.gif) no-repeat;width:112px;height:35px;z-index:8;}
.headerdi .tiao5p5{position:absolute;left:413px;background:url(xinsheng_liang.gif) no-repeat;width:112px;height:35px;z-index:7;}
.headerdi .tiao6p6{position:absolute;left:511px;background:url(01_liang.gif) no-repeat;width:112px;height:35px;z-index:6;}
.headerdi .tiao7p7{position:absolute;left:609px;background:url(13_liang.gif) no-repeat;width:112px;height:35px;z-index:5;}
.headerdi .tiao8p8{position:absolute;left:707px;background:url(35_liang.gif) no-repeat;width:112px;height:35px;z-index:4;}
.headerdi .tiao9p9{position:absolute;left:805px;background:url(shaoer_liang.gif) no-repeat;width:112px;height:35px;z-index:3;}

这段css代码是我写程序时用的，没有任何更改。可以根据自己的需要进行适当的修改。也可以完全删除重写。具体实现什么样的样式就看大家的想像力了。如所有导航菜单背景都相同。只要写四条css就行了。细看一下javascript代码就懂了。

如果你喜欢本文或对网络营销感兴趣，请订阅本站全文 Feed。

转载原创文章请注明，转载自：子矜网[http://www.zijin5.com/]
本文链接: http://www.zijin5.com/2010/05/css-dian-ji-zhuang-tai/收藏、分享这篇文章!

请您发表评论