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>無標(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模擬實(shí)現(xiàn)ECMAScript5新增的數(shù)組方法
ECMAScript5 新增了十個(gè)數(shù)組方法,這些方法只有在ie9及以上瀏覽器中可以被使用,下面是對(duì)于這些方法的模擬實(shí)現(xiàn)簡(jiǎn)單介紹下,需要的朋友參考下2017-03-03關(guān)于UTF-8的客戶端用AJAX方式獲取GB2312的服務(wù)器端亂碼問題的解決辦法
客戶端是UTF-8編碼,這也是現(xiàn)在大家公認(rèn)的標(biāo)準(zhǔn)編碼在這種情況下,實(shí)用AJAX異步獲取GB2312編碼的服務(wù)器端信息時(shí),不可避免的要遇到漢字亂碼問題2010-11-11javascript Error 對(duì)象 錯(cuò)誤處理
javascript常見error對(duì)象處理,錯(cuò)誤代碼集合2008-05-05headjs實(shí)現(xiàn)網(wǎng)站并行加載但順序執(zhí)行JS
本文主要介紹如何使用head.js實(shí)現(xiàn)網(wǎng)站并行加載但順序執(zhí)行JS,提高網(wǎng)站加載速度。需要的朋友可以看下2016-11-11