Question

关于JS控制A标签样式的问题

<link href="css/pagetitlemenu.css" rel="stylesheet" type="text/css" />
<ul class="ttm" id="ttm">
<li class="ttm" id="ttm">
<a class="ttm" id="ttm">1</a>
<a class="ttm" id="ttm">1</a>
</li>
</ul>

我怎么写JS控制点击第一个a标签的时候他的背景颜色变为蓝色第二个是灰色，点击第二个a标签的时候第二个变为蓝色第一个变成灰色。我在CSS里面用active来控制只能让点过的都变成蓝色变不回灰色，所以是不是要用js来控制样式。要怎么写

Answer 1

<a>标签背景颜色我是通过变换class来实现的，分别在css里面加入了灰色和蓝色背景的class

html代码如下：

<ul class="ttm" id="ttm">
	<li class="ttm" id="ttm">
		<a  class="ttm1" id="ttm1" onclick="clickttm(this)">1</a>
		<a  class="ttm2" id="ttm2" onclick="clickttm(this)">2</a>
		<a  class="ttm2" id="ttm3" onclick="clickttm(this)">3</a>
		<a  class="ttm2" id="ttm4" onclick="clickttm(this)">4</a>
		<a  class="ttm2" id="ttm5" onclick="clickttm(this)">5</a>
	</li>
</ul>

CSS代码如下：

body{
	background:#eee;
}
ul .ttm {
	list-style:none;
}

a {
	color:white;
	cursor:hand;
}

.ttm1 {
	background:blue;
}

.ttm2 {
	background:gray;
}

JS代码如下：

function clickttm(ele) {
	getElementsByClassName("ttm1")[0].className = "ttm2";
	ele.className = "ttm1";
}

function getElementsByClassName(searchClass,node,tag) {
	if(document.getElementsByClassName){
		return  document.getElementsByClassName(searchClass)
	}else{    
		node = node || document;
		tag = tag || '*';
		var returnElements = []
        var els =  (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag);
			var i = els.length;
			searchClass = searchClass.replace(/\-/g, "\\-");
			var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
			while(--i >= 0){
				if (pattern.test(els[i].className) ) {
					returnElements.push(els[i]);
				}
			}
			return returnElements;
    }
}

希望能帮你解决问题