多個A標籤,選中,未選中的顯示問題javascript
第一步: Jsp css
<c:choose><c:when test="${cityId==21 }"><a href="javascript:;" id="area0">所有</a><a href="javascript:;" id="area20">靜安</a><a href="javascript:;" id="area21">盧灣</a><a href="javascript:;" id="area22">黃浦</a><a href="javascript:;" id="area23">徐匯</a><a href="javascript:;" id="area24">長寧</a><a href="javascript:;" id="area25" >浦東</a><a href="javascript:;" id="area26">虹口</a><a href="javascript:;" id="area27">楊浦</a><a href="javascript:;" id="area28" >普陀</a><a href="javascript:;" id="area29">閔行</a><a href="javascript:;" id="area30">閘北</a><a href="javascript:;" id="area31">寶山</a><a href="javascript:;" id="area32">嘉定</a><a href="javascript:;" id="area33">松江</a><a href="javascript:;" id="area34">南匯</a><a href="javascript:;" id="area35">奉賢</a><a href="javascript:;" id="area36">金山</a><a href="javascript:;" id="area37">青浦</a><a href="javascript:;" id="area38">崇明</a></c:when>java
<c:otherwise><a href="javascript:;" id="area0">所有</a><a href="javascript:;" id="area1">海淀</a><a href="javascript:;" id="area2">朝陽</a><a href="javascript:;" id="area3">東城</a><a href="javascript:;" id="area4">西城</a><a href="javascript:;" id="area5">崇文</a><a href="javascript:;" id="area6">宣武</a><a href="javascript:;" id="area7">豐臺</a><a href="javascript:;" id="area9">房山</a><a href="javascript:;" id="area10">門頭溝</a><a href="javascript:;" id="area11">通州</a><a href="javascript:;" id="area12">順義</a><a href="javascript:;" id="area13">昌平</a><a href="javascript:;" id="area14">密雲</a><a href="javascript:;" id="area15">懷柔</a><a href="javascript:;" id="area16">延慶</a><a href="javascript:;" id="area17">平谷</a><a href="javascript:;" id="area18">大興</a></c:otherwise></c:choose>ide
第二步:js spa
function changeArea (areaId) {ip
changeAreaClassName(areaId);ci
}get
function changeAreaClassName(id){it
document.getElementById("area"+id).className=" current ";io
for(var i=0;i<100;i++){
if(i != id && document.getElementById("area"+i)!=null){
document.getElementById("area"+i).className=" otherCur ";
}
}
}
第三步 : css
<style>
a.otherCur {
color: #FFFFFF;
}
</style>