Question

js实现带有导航的搜索

js实现带有导航的搜索想实现的功能就是选择哪个板块时哪里的字就变红，点击另一个板块时之前的变回黑色点击的变为红色.但之前学的js已经忘的差不多了 不知哪里出错点击无反应.





Answer 1

看到代码，真的觉得你是忘了很多，不过别灰心，你这已经写的不错了。但是有几个问题， class名可以重复的，id不能重复，明显你是搞反了。

当然你的js思路也可以，传入的值跟id是一样的就变红色，不一样的就变黑色，但是你需要把素有的元素都获取了，才能全部重置为黑色，并且原生变颜色是obj.style.color = "..."的

然后我擅作主张改成了下面的js，毕竟id一般还是不要设置的这么频繁。

下面的例子我从0开始给你改了。因为下面的代码的话获取所有元素是从0开始下标的，另外a标签不知道你是做什么用，但是当前我是觉得没啥必要，就给去掉了，因为只是为了切换效果吗，不会出现跳链接的情况。

<div class="nsb-1" id="top_links">
	<div class="nsb-1-1" onclick="change(0)">测试</div>
	<div class="nsb-1-1" onclick="change(1)">测试</div>
	<div class="nsb-1-1" onclick="change(2)">测试</div>
	<div class="nsb-1-1" onclick="change(3)">测试</div>
	<div class="nsb-1-1" onclick="change(4)">测试</div>
</div>
<script>
	function change(val){
	//获取全部class为nsb-1-1的元素，
		var obj = document.getElementsByClassName("nsb-1-1");
		//循环所有元素
		for(var i = 0; i < obj.length; i++){
			//如果当前元素的下标与传入的值一样，那么就变颜色
			if(val == i){
				console.log(val + "  " + i)
				obj[i].style.color = "#f00";
			}else{
			//否则就变黑色。
				obj[i].style.color = "#000";
			}
		}
	}
</script>

加油吧，还有更简单点额写法，那么就要你自己去深度学习了。