css导航菜单点击后如何改变背景图片？
现在是鼠标移到菜单上后，背景颜色改变，鼠标移开或点击后回归原色，现在是如何实现 点击后的底色就是鼠标移到菜单上的底色，并且点击另一个菜单的时候 前一个菜单的底色回归原色。
比如：http://www.alixixi.com/index.html 的导航，我这里不需要二级菜单 就一级的导航，请给些思路 谢谢！
（下面代码的图片 您测试的时候可以随便找些图片代替下）
----------------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 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>
[解决办法]
在LI里面使用onmouseover onmouseout 等的事件
[解决办法]
mark
[解决办法]
#nav a:visited {color:#000;text-decoration:none;margin:0;} #nav a:hover {color:#fff;text-decoration:none;} 在这里面添加背景图片就行了。#nav a:visited {color:#000;text-decoration:none;margin:0;background-image:url('path');} #nav a:hover {color:#fff;text-decoration:none;background-image:url('path');}
[解决办法]
学习
[解决办法]
<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>
[解决办法]
你的代码是在太长了 ， 简单点说 给要点击的地方加个单击事件，单击后改变CSS样式、
[解决办法]
很简单一个鼠标事件onmouse
[解决办法]
可以调用js
[解决办法]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>Untitled Document</title> <style> body { font-size: 12px; font-family: '宋体'; } ul.TabBarLevel1 { list-style: none; margin: 0; padding: 0; height: 29px; background-image: url(http://www.blueidea.com/articleimg/2006/04/3363/tabbar_level1_bk.gif); } ul.TabBarLevel1 li { float: left; padding: 0; height: 29px; margin-right: 1px; background: url(http://www.blueidea.com/articleimg/2006/04/3363/tabbar_level1_slice_left_bk.gif) left top no-repeat; } ul.TabBarLevel1 li a { display: block; line-height: 29px; padding: 0 20px; color: #333; background: url(http://www.blueidea.com/articleimg/2006/04/3363/tabbar_level1_slice_right_bk.gif) right top no-repeat; white-space: nowrap; } ul.TabBarLevel1 li.Selected { background: url(http://www.blueidea.com/articleimg/2006/04/3363/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat; } ul.TabBarLevel1 li.Selected a { background: url(http://www.blueidea.com/articleimg/2006/04/3363/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat; } ul.TabBarLevel1 li a:link, ul.TabBarLevel1 li a:visited { color: #333; text-decoration: none; } ul.TabBarLevel1 li a:hover, ul.TabBarLevel1 li a:active { color: #F30; text-decoration: underline; } ul.TabBarLevel1 li.Selected a:link, ul.TabBarLevel1 li.Selected a:visited { color: #000; text-decoration: none; } ul.TabBarLevel1 li.Selected a:hover, ul.TabBarLevel1 li.Selected a:active { color: #F30; text-decoration: underline; } div.HackBox { padding: 2px 2px; border-left: 2px solid #6697CD; border-right: 2px solid #6697CD; border-bottom: 2px solid #6697CD; display: none; } </style> </head> <body> <div id="Whatever"> <ul class="TabBarLevel1" id="TabPage1"> <li id="Tab1"> <a href="#" onclick="javascript:switchTab('TabPage1','Tab1');">Linmoo简介</a> </li> <li id="Tab2" class="Selected"> <a href="#" onclick="javascript:switchTab('TabPage1','Tab2');">个人作品</a> </li> <li id="Tab3"> <a href="#" onclick="javascript:switchTab('TabPage1','Tab3');">Linmoo游记</a> </li> <li id="Tab4"> <a href="#" onclick="javascript:switchTab('TabPage1','Tab4');">留言簿</a> </li> </ul> <div id="cnt"> <div id="dTab1" class="HackBox"> 出生 长大 学习 成长..... </div> <div id="dTab2" class="HackBox" style="display:block"> 个站 摄影 WEB CODE </div> <div id="dTab3" class="HackBox"> 第一次远行 天堂一样--西藏游记 彩云之南 异国风情 </div> <div id="dTab4" class="HackBox"> I.路过,留言 II.表达景仰之意 III.索取LINMOO签名 IV.留言,留言..... </div> </div> </div> <script language="JavaScript" type="text/javascript"> //Switch Tab Effect function switchTab(tabpage, tabid){ var oItem = document.getElementById(tabpage); for (var i = 0; i < oItem.children.length; i++) { var x = oItem.children(i); x.className = ""; var y = x.getElementsByTagName('a'); y[0].style.color = "#333333"; } document.getElementById(tabid).className = "Selected"; var dvs = document.getElementById("cnt").getElementsByTagName("div"); for (var i = 0; i < dvs.length; i++) { if (dvs[i].id == ('d' + tabid)) dvs[i].style.display = 'block'; else dvs[i].style.display = 'none'; } } </script> </body></html>
[解决办法]
帮顶
[解决办法]
帮顶
[解决办法]
我也迫切想知道。
注意的是：点击超链接之后，页面要跳转到一个新页面。比如：a.html b.html c.html这三个页面。在a.html页面点击b.html页面之后，b.html菜单链接的背景色或是背景图片变换了。而a.html菜单链接中的背景色或是背景图片又回归到了原背景色或原背景图。
期待高手出现解决。。。感谢
[解决办法]
深夜来蹭分