Rumah >hujung hadapan web >tutorial css >如何将css导航菜单点击过后变为背景图片？

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

黄舟asal: 2017-07-19 15:17:042854semak imbas

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

----------------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(&#39;menu&#39;+m).getElementsByTagName(&#39;li&#39;);
    var list=document.getElementById(&#39;content&#39;+m).getElementsByTagName(&#39;div&#39;);
    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>

Atas ialah kandungan terperinci 如何将css导航菜单点击过后变为背景图片？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：关于css如何实现背景图片不规则的导航菜单的示例代码分享Artikel seterusnya：如何使用css选择器来实现导航栏背景图的切换？

Artikel berkaitan

Lihat lagi