当前位置: 代码迷 >> Java Web开发 >> css导航菜单点击后怎么改变背景图片
  详细解决方案

css导航菜单点击后怎么改变背景图片

热度:8238   发布时间:2013-02-25 21:21:17.0
css导航菜单点击后如何改变背景图片?
现在是鼠标移到菜单上后,背景颜色改变,鼠标移开或点击后回归原色,现在是如何实现 点击后的底色就是鼠标移到菜单上的底色,并且点击另一个菜单的时候 前一个菜单的底色回归原色。
比如:http://www.alixixi.com/index 的导航,我这里不需要二级菜单 就一级的导航,请给些思路 谢谢!
(下面代码的图片 您测试的时候可以随便找些图片代替下)


----------------css 部分------------------
<style>
/*下拉菜单样式*/

#div_center { width:100%; height:33px; margin-left: auto;margin-right:auto;} /*定义总体宽度、高度;background:003399; 控制背景颜色,居中对齐*/ 
#nav {line-height: 33px; list-style-type: none; } /*控制一级菜单行高;上边距5px;*/  
#nav a { display: block; width: 80px; text-align:center; font-size:14px; font:"宋体"; font-weight: bold; margin-left:10px;} /*一级菜单链接总体样式:每个菜单的宽,居中对齐,文字大小*/ 
#nav a:link {
color:#000;
text-decoration:none;
margin:0;

} /* 未访问的链接 */  
#nav a:visited {color:#000;text-decoration:none;margin:0;} /* 已访问的颜色 */  
#nav a:hover {color:#fff;text-decoration:none;} /* 鼠标在链接上 */
#nav li {float: left; margin-right:15px;} /* 一级菜左对齐 */ 
#nav li a:hover{background:url(images/1.jpg)} /* 鼠标在一级菜单上改变其背景色 */ 

#nav li:hover ul {left: auto;}
#nav li.sfhover ul {left: auto;}
#content {clear: left;}
</style>

-----------css结束-------------

------------菜单内容-----------
<div><div id=div_center>
  <UL id=nav>
  <LI><A href="index.asp">首页</A></LI>
  <LI><a href="about.asp">学校简介</a></LI>
  <LI><A href="js.asp">教师风采</A> </LI>
  <LI><A href="xs.asp">优秀学生</A> </LI>
  <LI><A href="zp.asp">作品展厅</A> </LI>
  <LI><A href="xc.asp">学校相册</A> </LI>
  <LI><A href="ly.asp">在线留言</A> </LI>
  </UL>
  </div></div>
-----------菜单内容结束--------

------解决方案--------------------------------------------------------
HTML code
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>选项卡菜单</title><style type="text/css">.bg{background:url(MenuLine.gif) repeat; height:30px; width:328px; line-height:30px}ul{list-style-type:none; margin:0; padding:0; font-size:14px}ul li{float:left; width:82px; text-align:center}.mouseon{background:url(Menu.gif) no-repeat; font-weight:bold; color:#f00}.mouseout{font-weight:normal}#content0,#content1{width:326px!important; width:328px; height:200px; border:1px solid #dcefe1}h2{margin:0; padding:0}</style><script language="javascript">function Tab(m,n){    var menu=document.getElementById('menu'+m).getElementsByTagName('li');    var list=document.getElementById('content'+m).getElementsByTagName('div');    for(var i=0;i<menu.length;i++)    {        menu[i].className=i==n?"mouseon":"mouseout";        list[i].style.display=i==n?"block":"none";    }}</script><body><div id="menu0" class="bg">    <ul>        <li class="mouseon" onMouseOver="Tab(0,0)">选项1</li>        <li class="mouseout" onMouseOver="Tab(0,1)">选项2</li>        <li class="mouseout" onMouseOver="Tab(0,2)">选项3</li>        <li class="mouseout" onMouseOver="Tab(0,3)">选项4</li>    </ul></div><div id="content0">    <div style="display:block">        <h2>帝王槌</h2><br/>        立剑赏月意惆怅,袖饰刀,衣披霜,傲视雾丸,徒手战扶桑.<br />问津终寻帝王陵,黑影没,尸满岗,惟见逆鲮露寒光.  <br />须发苍,气轩昂,三尺银狼,破风动八方.  <br />依身紧握噬魂枪,饮虎血,豪万丈.惟有千年我故乡!    </div>    <div style="display:none">        <h2>玉女枪法</h2><br/>        曾经有个梦想:驰骋江湖,快意恩仇。<br />曾经有份愿望:千里追凶,十步溅血。<br />曾经有腔豪情:奇功盖世,名冠武林。<br />曾经有种期盼:烛影摇红,衣袖添香。    </div>    <div style="display:none">        <h2>黑沙刚体</h2><br/>        赵客缦胡缨,吴钩霜雪明。银鞍照白马,飒沓如流星。十步杀一人,千里不留行。事了拂衣去,深藏身与名。 闲过信陵饮,脱剑膝前横。将炙啖朱亥,持觞劝侯嬴。 三杯吐然诺,五岳倒为轻。眼花耳热后,意气素霓生。救赵挥金锤,邯郸先震惊。千秋二壮士,烜赫大梁城。纵死侠骨香,不惭世上英。谁能书阁下,白首太玄经。    </div>    <div style="display:none">        <h2>不羁浪人枪</h2><br/>        素手相牵,斜辉入眼帘,一轮逍遥自在间,醉了山水闲。<br />沙漠绿水涟,鱼游浅底,明眸一水天。<br />爱在村友相谈,开心点点,笑语连连,率性夜无眠。<br />月在西边,风乱星寒,辗转醇香旧事,蛾儿曼舞灯前。    </div></div><p><div id="menu1" class="bg">    <ul>        <li class="mouseon" onMouseOver="Tab(1,0)">选项5</li>        <li class="mouseout" onMouseOver="Tab(1,1)">选项6</li>        <li class="mouseout" onMouseOver="Tab(1,2)">选项7</li>        <li class="mouseout" onMouseOver="Tab(1,3)">选项8</li>    </ul></div><div id="content1">    <div style="display:block">        <h2>干将</h2><br/>    干将者,吴人也;莫邪,干将之妻也。干将作剑,金铁之精不流,于是干将夫妻,乃断发剪爪,投于炉中,金铁乃濡,遂以成剑,阳曰干将,阴曰莫邪。     </div>    <div style="display:none">        <h2>龙渊</h2><br/>        “何谓龙渊、太阿、工布?”答曰:“欲知龙渊,观其状,如登高山,临深渊;欲知太阿,观其(纹),巍巍翼翼,如流水之波;欲知工布,(纹)从文起,至脊而止,如珠不可衽,文若流水不绝。”    </div>    <div style="display:none">        <h2>湛卢</h2><br/>        欧冶子所铸五大名剑为三大二小。其大者有湛卢、纯钧、胜邪;其小者有鱼肠、世阙。    </div>    <div style="display:none">        <h2>轩辕剑</h2><br/>        轩辕采首山之铜,铸剑,以天之古字题名。    </div></div></body></html>