我想点class="menu01"的链接,就调用CSS里面的.menu01ch
点class="menu02"的链接,就调用CSS里面的.menu02ch<!DOCTYPE html>
<html>
<SCRIPT type=text/javascript>
//@Mr.Think---函数加载
function addLoadEvent(func) { var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
//@Mr.Think---判断URL实现菜单高亮显示
function highURL(menuId,classCur){
if(!document.getElementById) return false;
if(!document.getElementById(menuId)) return false;
if(!document.getElementsByTagName) return false;
var menuId=document.getElementById(menuId);
var links=menuId.getElementsByTagName("a");
for(var i=0; i<links.length; i++ ){
var menuLink=links.href;
var currentLink=window.location.href;
if(currentLink.indexOf(menuLink)!=-1){
links.className=classCur;
}
}
}
//@Mr.Think---点击实现高亮显示
function highOnclick(elemId, tagOff, classCur) {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById(elemId)) return false;
var elemId = document.getElementById(elemId);
var links = elemId.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
if (links.parentNode.nodeName !== tagOff) {
links.onclick = function() {
for (n = 0; n < links.length; n++) {
links[n].className = "";
}
this.className = classCur;
this.blur();
}
}
}
}
//@Mr.Think---追加样式
function addClass(elem, value) {
if (!elem.className) {
elem.className = value;
} else {
newClass = elem.className;
newClass += " ";
newClass += value;
elem.className = newClass;
}
}
//@Mr.Think---第一个链接高亮显示
function addTagCur(elemId,tag,classCur){
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById(elemId)) return false;
var elemId = document.getElementById(elemId);
var tagitem = elemId.getElementsByTagName(tag);
var links = tagitem[0].getElementsByTagName("a");
addClass(links[0], classCur);
}
//-----------------------------------------以上为JS类@Mr.Think-----------------------------------------
//top导航高亮function adminfun() {
highOnclick("side", "ul", "menu01ch");
addTagCur("side","ul","menu01ch")
}
addLoadEvent(adminfun);
</SCRIPT>
<title></title>
<style type="text/css">
<!--
.menu01ch {background-color: #00FF00;}
.menu02ch {background-color: #FFCC00;}
.menu03ch {background-color: #000000;}
.menu04ch {background-color: #00FFFF;}
-->
</style>
</head>
<body>
<div id="side">
<ul>
<a id="menuid" class="menu01" href="#" >博文列表</a>
<a id="menuid" class="menu02" href="#">博文回收站</a>
<a id="menuid" class="menu03" href="#" >博文分类管理</a>
<a id="menuid" class="menu04" href="#" >博文分类添加</a>
</ul>
</div>
</body>
</html>
点class="menu02"的链接,就调用CSS里面的.menu02ch<!DOCTYPE html>
<html>
<SCRIPT type=text/javascript>
//@Mr.Think---函数加载
function addLoadEvent(func) { var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
//@Mr.Think---判断URL实现菜单高亮显示
function highURL(menuId,classCur){
if(!document.getElementById) return false;
if(!document.getElementById(menuId)) return false;
if(!document.getElementsByTagName) return false;
var menuId=document.getElementById(menuId);
var links=menuId.getElementsByTagName("a");
for(var i=0; i<links.length; i++ ){
var menuLink=links.href;
var currentLink=window.location.href;
if(currentLink.indexOf(menuLink)!=-1){
links.className=classCur;
}
}
}
//@Mr.Think---点击实现高亮显示
function highOnclick(elemId, tagOff, classCur) {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById(elemId)) return false;
var elemId = document.getElementById(elemId);
var links = elemId.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
if (links.parentNode.nodeName !== tagOff) {
links.onclick = function() {
for (n = 0; n < links.length; n++) {
links[n].className = "";
}
this.className = classCur;
this.blur();
}
}
}
}
//@Mr.Think---追加样式
function addClass(elem, value) {
if (!elem.className) {
elem.className = value;
} else {
newClass = elem.className;
newClass += " ";
newClass += value;
elem.className = newClass;
}
}
//@Mr.Think---第一个链接高亮显示
function addTagCur(elemId,tag,classCur){
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById(elemId)) return false;
var elemId = document.getElementById(elemId);
var tagitem = elemId.getElementsByTagName(tag);
var links = tagitem[0].getElementsByTagName("a");
addClass(links[0], classCur);
}
//-----------------------------------------以上为JS类@Mr.Think-----------------------------------------
//top导航高亮function adminfun() {
highOnclick("side", "ul", "menu01ch");
addTagCur("side","ul","menu01ch")
}
addLoadEvent(adminfun);
</SCRIPT>
<title></title>
<style type="text/css">
<!--
.menu01ch {background-color: #00FF00;}
.menu02ch {background-color: #FFCC00;}
.menu03ch {background-color: #000000;}
.menu04ch {background-color: #00FFFF;}
-->
</style>
</head>
<body>
<div id="side">
<ul>
<a id="menuid" class="menu01" href="#" >博文列表</a>
<a id="menuid" class="menu02" href="#">博文回收站</a>
<a id="menuid" class="menu03" href="#" >博文分类管理</a>
<a id="menuid" class="menu04" href="#" >博文分类添加</a>
</ul>
</div>
</body>
</html>
???
<a id="menuid" class="menu02" href="#" onclick="this.className='menu02ch'">博文回收站</a>
<a id="menuid" class="menu03" href="#" onclick="this.className='menu03ch'">博文分类管理</a>
<a id="menuid" class="menu04" href="#" onclick="this.className='menu04ch'">博文分类添加</a>
<a id="menu02" class="menu02" href="#" onclick="this.className+='ch'">博文回收站</a>
<a id="menu03" class="menu03" href="#" onclick="this.className+='ch''">博文分类管理</a>
<a id="menu04" class="menu04" href="#" onclick="this.className+='ch'">博文分类添加</a>其实用jquery更简单
window.onload = function(){
var as = document.getElementsByTagName("A");
for(var i=0;i<as.length;i++){
as[i].onclick = function(o){
return function(){
o.className = o.className + "ch";
}
}(as[i])
}
}
建议把我上面代码,运行下,就能看到效果,只是所有的链接都只调用了一个CLASS