当前位置：Gxlcms > css > 如何将css导航菜单点击过后变为背景图片？

如何将css导航菜单点击过后变为背景图片？

时间：2021-07-01 10:21:17 帮助过：32人阅读

现在是鼠标移到菜单上后，背景颜色改变，鼠标移开或点击后回归原色，现在是如何实现 点击后的底色就是鼠标移到菜单上的底色，并且点击另一个菜单的时候 前一个菜单的底色回归原色。

----------------css 部分------------------

  1. <style>
  2. /*下拉菜单样式*/
  3. #div_center { width:100%; height:33px;  margin-left: auto;margin-right:auto;}  /*定义总体宽度、高度；background:003399; 控制背景颜色,居中对齐*/ 
  4. #nav {line-height: 33px; list-style-type: none; }         /*控制一级菜单行高；上边距5px；*/   
  5. #nav a { display: block; width: 80px; text-align:center; font-size:14px; font:"宋体"; font-weight: bold;     margin-left:10px;} /*一级菜单链接总体样式：每个菜单的宽，居中对齐，文字大小*/ 
  6. #nav a:link  {
  7. color:#000;
  8. text-decoration:none;
  9. margin:0;
  10. }     /* 未访问的链接 */   
  11. #nav a:visited  {color:#000;text-decoration:none;margin:0;}    /* 已访问的颜色 */  
  12. #nav a:hover {color:#fff;text-decoration:none;}                /* 鼠标在链接上 */
  13. #nav li {float: left; margin-right:15px;}                   /* 一级菜左对齐 */ 
  14. #nav li a:hover{background:url(images/1.jpg)}     /* 鼠标在一级菜单上改变其背景色 */ 
  15. #nav li:hover ul {left: auto;}
  16. #nav li.sfhover ul {left: auto;}
  17. #content {clear: left;}
  18. </style>

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

------------菜单内容-----------

  1. <div><div id=div_center>
  2.                     <UL id=nav>
  3.                       <LI><A href="index.asp">首页</A></LI>
  4.     <LI><a href="about.asp">学校简介</a></LI>
  5.     <LI><A href="js.asp">教师风采</A> </LI>
  6.     <LI><A href="xs.asp">优秀学生</A> </LI>
  7.     <LI><A href="zp.asp">作品展厅</A> </LI>
  8.     <LI><A href="xc.asp">学校相册</A> </LI>
  9.     <LI><A href="ly.asp">在线留言</A> </LI>
  10.   </UL>
  11.     </div></div>

-----------菜单内容结束--------

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

以上就是如何将css导航菜单点击过后变为背景图片？的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！