鼠标点击导航的链接变色之后，保持到点击下一个链接

html代码：

<div class="type_div" id="type_div">
<h3>类型</h3>
<a class="a1" href="#" οnclick="setColor()" οnmοuseοut="" >A</a>
<a class="b2" οnclick="setColor1()" href="#">B</a>
<a class="c3" οnclick="setColor2()" href="#">C</a>
<a class="d4" οnclick="setColor3()" href="#">D</a>
</div>

 

css样式：

<style type="text/css">

#type_divB{ color:#F00;}

#test{
color:#0F6;
}
</style>

 

js代码：

<script type="text/javascript">
function setColor(){
var xA1=document.getElementById("type_div").getElementsByTagName("a");
var i=0;
for(i=0;i<xA1.length;i++){
if(xA1[i].className=="a1")
{
xA1[i].id="type_divB";
}
else if(xA1[i].className=="b2")
{
xA1[i].id="test";
}

}
}

function setColor1(){
var xA1=document.getElementById("type_div").getElementsByTagName("a");
var i=0;
for(i=0;i<xA1.length;i++){
if(xA1[i].className=="b2")
{
xA1[i].id="type_divB";
}
else
{
xA1[i].id="test";
}
}
}
function setColor2(){
var xA1=document.getElementById("type_div").getElementsByTagName("a");
var i=0;
for(i=0;i<xA1.length;i++){
if(xA1[i].className=="c3")
{
xA1[i].id="type_divB";
}
else
{
xA1[i].id="test";
}
}
}
function setColor3(){
var xA1=document.getElementById("type_div").getElementsByTagName("a");
var i=0;
for(i=0;i<xA1.length;i++){
if(xA1[i].className=="d4")
{
xA1[i].id="type_divB";
}
else
{
xA1[i].id="test";
}
}
}
</script>
<style>
.ARvideo_big_down_img
{
margin-left:25px;
}
</style>

转载于:https://www.cnblogs.com/leaflife/p/6735092.html