如何将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('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>Atas ialah kandungan terperinci 如何将css导航菜单点击过后变为背景图片？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Cara menggunakan butang bootstrap
Apr 07, 2025 pm 03:09 PM
Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang
Cara memasukkan gambar di bootstrap
Apr 07, 2025 pm 03:30 PM
Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.
Cara mengubah saiz bootstrap
Apr 07, 2025 pm 03:18 PM
Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-
Cara melihat tarikh bootstrap
Apr 07, 2025 pm 03:03 PM
Jawapan: Anda boleh menggunakan komponen pemetik tarikh bootstrap untuk melihat tarikh di halaman. Langkah -langkah: Memperkenalkan rangka kerja bootstrap. Buat kotak input pemilih Tarikh dalam HTML. Bootstrap secara automatik akan menambah gaya kepada pemilih. Gunakan JavaScript untuk mendapatkan tarikh yang dipilih.
Cara Menyiapkan Kerangka untuk Bootstrap
Apr 07, 2025 pm 03:27 PM
Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.
Cara Menulis Garis Pecah Di Bootstrap
Apr 07, 2025 pm 03:12 PM
Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.
Cara Mengesahkan Tarikh Bootstrap
Apr 07, 2025 pm 03:06 PM
Untuk mengesahkan tarikh dalam bootstrap, ikuti langkah -langkah ini: memperkenalkan skrip dan gaya yang diperlukan; memulakan komponen pemilih tarikh; Tetapkan atribut data-BV-tarikh untuk membolehkan pengesahan; Konfigurasikan peraturan pengesahan (seperti format tarikh, mesej ralat, dll.); Mengintegrasikan rangka kerja pengesahan bootstrap dan mengesahkan input tarikh secara automatik apabila borang dikemukakan.
Cara menggunakan bootstrap di vue
Apr 07, 2025 pm 11:33 PM
Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.
