快捷導(dǎo)航

js導(dǎo)航欄單擊事件背景變換示例代碼

更新時(shí)間：2014年01月13日 10:05:08 作者：

本篇文章主要是對(duì)js導(dǎo)航欄單擊事件背景變換的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助

如下所示;

<!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>無標(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>

您可能感興趣的文章:

相關(guān)文章

詳解JS模塊導(dǎo)入導(dǎo)出
這篇文章主要介紹了詳解JS模塊導(dǎo)入導(dǎo)出以及相關(guān)問題解決方法，需要的朋友學(xué)習(xí)參考下吧。
2017-12-12
10個(gè)功能強(qiáng)大的JavaScript動(dòng)畫庫分享
動(dòng)畫,從人群中脫穎而出、吸引訪客注意力的絕佳方式,本文將給大家分享10 個(gè)功能強(qiáng)大的 JavaScript 動(dòng)畫庫,有了這 10 個(gè)功能強(qiáng)大的 JavaScript 庫,創(chuàng)建動(dòng)畫再簡單不過了,感興趣的同學(xué)可以參考閱讀
2023-09-09
JS逆序遍歷實(shí)現(xiàn)代碼
遍歷是程序中最常用的語法之一。在JS里，小到數(shù)據(jù)處理，大到列表渲染，配合ajax對(duì)json數(shù)據(jù)的支持，遍歷的使用場(chǎng)景也越來越多
2014-12-12
js實(shí)現(xiàn)網(wǎng)頁版貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)網(wǎng)頁版貪吃蛇游戲，文中示例代碼介紹的非常詳細(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)換方法及需要注意的問題小結(jié)(挺全面)
JavaScript類型轉(zhuǎ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