css导航菜单点击后怎么改变背景图片-Java教程-爱易网页

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

日期：2014-05-17　浏览次数：20710 次

css导航菜单点击后如何改变背景图片？
现在是鼠标移到菜单上后，背景颜色改变，鼠标移开或点击后回归原色，现在是如何实现点击后的底色就是鼠标移到菜单上的底色，并且点击另一个菜单的时候前一个菜单的底色回归原色。
比如：http://www.aiyiweb.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 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 />
问津终寻帝王陵,黑影没,尸满岗,惟见逆鲮露寒光.　 &l

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>