如何將css導覽選單點擊過後變成背景圖？-css教學-PHP中文網

首頁

web前端

css教學

如何將css導覽選單點擊過後變成背景圖？

黄舟

Jul 19, 2017 pm 03:17 PM

css

現在是滑鼠移到選單上後，背景顏色改變，滑鼠移開或點擊後回歸原色，現在是如何實現點擊後的底色就是滑鼠移到選單上的底色，並且點擊另一個選單的時候前一個選單的底色回歸原色。

----------------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 id="帝王槌">帝王槌</h2><br/>
        立剑赏月意惆怅,袖饰刀,衣披霜,傲视雾丸,徒手战扶桑.<br />
问津终寻帝王陵,黑影没,尸满岗,惟见逆鲮露寒光.　 <br />
须发苍,气轩昂,三尺银狼,破风动八方.　 <br />
依身紧握噬魂枪,饮虎血,豪万丈.惟有千年我故乡!
    </div>
    <div style="display:none">
        <h2 id="玉女枪法">玉女枪法</h2><br/>
        曾经有个梦想：驰骋江湖，快意恩仇。<br />
曾经有份愿望：千里追凶，十步溅血。<br />
曾经有腔豪情：奇功盖世，名冠武林。<br />
曾经有种期盼：烛影摇红，衣袖添香。
    </div>
    <div style="display:none">
        <h2 id="黑沙刚体">黑沙刚体</h2><br/>
        赵客缦胡缨，吴钩霜雪明。银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。事了拂衣去，深藏身与名。 
闲过信陵饮，脱剑膝前横。将炙啖朱亥，持觞劝侯嬴。 
三杯吐然诺，五岳倒为轻。眼花耳热后，意气素霓生。
救赵挥金锤，邯郸先震惊。千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。谁能书阁下，白首太玄经。
    </div>
    <div style="display:none">
        <h2 id="不羁浪人枪">不羁浪人枪</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 id="干将">干将</h2><br/>    干将者，吴人也；莫邪，干将之妻也。干将作剑，金铁之精不流，于是干将夫妻，乃断发剪爪，投于炉中，金铁乃濡，遂以成剑，阳曰干将，阴曰莫邪。 
    </div>
    <div style="display:none">
        <h2 id="龙渊">龙渊</h2><br/>        “何谓龙渊、太阿、工布？”答曰：“欲知龙渊，观其状，如登高山，临深渊；欲知太阿，观其（纹），巍巍翼翼，如流水之波；欲知工布，（纹）从文起，至脊而止，如珠不可衽，文若流水不绝。”
    </div>
    <div style="display:none">
        <h2 id="湛卢">湛卢</h2><br/>
        欧冶子所铸五大名剑为三大二小。其大者有湛卢、纯钧、胜邪；其小者有鱼肠、世阙。
    </div>
    <div style="display:none">
        <h2 id="轩辕剑">轩辕剑</h2><br/>
        轩辕采首山之铜，铸剑，以天之古字题名。
    </div>
</div>
</body>
</html>

以上是如何將css導覽選單點擊過後變成背景圖？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

這麼多顏色鏈接Apr 13, 2025 am 11:36 AM

最近有一系列有關顏色的工具，文章和資源。請允許我通過將它們四捨五之後關閉幾個標籤，以供您享受。

自動利潤在Flexbox中的工作方式Apr 13, 2025 am 11:35 AM

羅賓以前已經介紹過這一點，但是我在過去的幾周里聽到了一些關於它的困惑，看到另一個人在解釋它，我想

移動彩虹Apr 13, 2025 am 11:27 AM

我絕對喜歡三明治網站的設計。在許多美麗的功能中，這些標題是滾動時帶有彩虹的下線。它不是

新年，新工作？讓我們做一個網格驅動的簡歷！Apr 13, 2025 am 11:26 AM

許多流行的簡歷設計通過以網格形狀鋪設部分來充分利用可用的頁面空間。讓我們使用CSS網格創建一個佈局

將用戶擺脫過多習慣的一種方法Apr 13, 2025 am 11:25 AM

頁面重新加載是一回事。有時，當我們認為它沒有響應或認為新內容可用時，我們會刷新頁面。有時我們只是生氣

域驅動的設計與ReactApr 13, 2025 am 11:22 AM

關於如何在React世界中組織前端應用的指導很少。（只需移動文件，直到“感覺正確”，大聲笑）。真相

檢測非活動用戶Apr 13, 2025 am 11:08 AM

大多數情況下，您並不真正在乎用戶是否積極參與或暫時非活動。不活躍，意思，也許他們

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo一直在集成方面非常出色。他們與特定應用程序（例如廣告系列顯示器，MailChimp和Typekit）進行集成，但他們也

See all articles

熱AI工具

熱工具

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中