js導(dǎo)航欄單擊事件背景變換示例代碼
如下所示;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<script type="text/javascript">
function change_bg(obj)
{
var a=document.getElementById("Menu").getElementsByTagName("a");
for(var i=0;i<a.length;i++)
{
a[i].className="";
}
obj.className="current";
}
</script>
<style type="text/css">
body{
font-size:17px;
}
.current{
background:red;
}
#container ul
{
list-style-type:none;
}
#container ul li
{
float:left;
margin-right:3px;
}
#container ul li a{
text-decoration:none;
color:#000;
}
</style>
</head>
<body>
<div id="container">
<ul id="Menu">
<li><a href="javascript:" onclick="change_bg(this)" class="current">Menu1</a></li>
<li><a href="javascript:" onclick="change_bg(this)">Menu2</a></li>
<li><a href="javascript:" onclick="change_bg(this)">Menu3</a></li>
<li><a href="javascript:" onclick="change_bg(this)">Menu4</a></li>
<li><a href="javascript:" onclick="change_bg(this)">Menu5</a></li>
</ul>
</div>
</body>
</html>
- JS 實(shí)現(xiàn)導(dǎo)航欄懸停效果
- JavaScript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊導(dǎo)航欄變色特效
- JavaScript實(shí)現(xiàn)滑動(dòng)導(dǎo)航欄效果
- Fullpage.js固定導(dǎo)航欄-實(shí)現(xiàn)定位導(dǎo)航欄
- JS滾動(dòng)到指定位置導(dǎo)航欄固定頂部
- 一步步教大家編寫酷炫的導(dǎo)航欄js+css實(shí)現(xiàn)
- JavaScript NodeTree導(dǎo)航欄(菜單項(xiàng)JSON類型/自制)
- 原生JS實(shí)現(xiàn) MUI導(dǎo)航欄透明漸變效果
- js實(shí)現(xiàn)帶緩動(dòng)動(dòng)畫的導(dǎo)航欄效果
- JS實(shí)現(xiàn)百度新聞導(dǎo)航欄效果
相關(guān)文章
這篇文章主要介紹了詳解JS模塊導(dǎo)入導(dǎo)出以及相關(guān)問(wèn)題解決方法，需要的朋友學(xué)習(xí)參考下吧。2017-12-12
10個(gè)功能強(qiáng)大的JavaScript動(dòng)畫庫(kù)分享
動(dòng)畫,從人群中脫穎而出、吸引訪客注意力的絕佳方式,本文將給大家分享10 個(gè)功能強(qiáng)大的 JavaScript 動(dòng)畫庫(kù),有了這 10 個(gè)功能強(qiáng)大的 JavaScript 庫(kù),創(chuàng)建動(dòng)畫再簡(jiǎn)單不過(guò)了,感興趣的同學(xué)可以參考閱讀2023-09-09
遍歷是程序中最常用的語(yǔ)法之一。在JS里，小到數(shù)據(jù)處理，大到列表渲染，配合ajax對(duì)json數(shù)據(jù)的支持，遍歷的使用場(chǎng)景也越來(lái)越多2014-12-12
js實(shí)現(xiàn)網(wǎng)頁(yè)版貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)網(wǎng)頁(yè)版貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
JavaScript+node實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單
這篇文章主要為大家詳細(xì)介紹了JavaScript+node實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記（二十一） JavaScript中的XML
雖然XML和DOM已經(jīng)變成Web開發(fā)的重要組成部分，但目前僅IE跟Mozilla支持客戶端的XML處理2012-09-09
JavaScript類型轉(zhuǎn)換方法及需要注意的問(wèn)題小結(jié)(挺全面)
JavaScript類型轉(zhuǎn)換方法及需要注意的問(wèn)題，在js中經(jīng)常需要對(duì)數(shù)據(jù)類型的轉(zhuǎn)換操作，需要的朋友可以參考下。2010-11-11
codemirror6實(shí)現(xiàn)自定義代碼提示效果實(shí)例
這篇文章主要給大家介紹了關(guān)于codemirror6實(shí)現(xiàn)自定義代碼提示效果的相關(guān)資料,CodeMirror是一個(gè)網(wǎng)絡(luò)代碼編輯器組件,它可以在網(wǎng)站中用于實(shí)現(xiàn)支持多種編輯功能的文本輸入字段,并具有豐富的編程接口以允許進(jìn)一步擴(kuò)展,需要的朋友可以參考下2023-08-08
JavaScript判斷變量是對(duì)象還是數(shù)組的方法
這篇文章主要介紹了JavaScript判斷變量是對(duì)象還是數(shù)組的方法,本文分別使用instanceof和typeof實(shí)現(xiàn),需要的朋友可以參考下2014-08-08
use jscript Create a SQL Server database
use jscript Create a SQL Server database...2007-06-06