Question

【选项卡】js控制鼠标点击后的样式

如图，我下载了一个选项卡脚本，但是唯一不足的是：选项的字体没有变化，也就是“营业中、可订餐、待营业”这里字体没有特定变化。

我想默认情况下营业中是红色的字，点可订餐后，可订餐就变成红色字且营业中变成黑色字...

这样JS该怎么写。我一点都不懂JS，但是这个脚本真的很适合我做的页面求大家帮帮忙。

下面是源代码，最原始的文件我也不知道丢哪里去了
<div id="demo5-1">
<ul>
<li class="tabMenu">营业中</li>
<li class="tabMenu">可订餐</li>
<li class="tabMenu">待营业</li>
</ul>
<div class="mt30">
<div class="tabContent" style="display: block;"> 这里是对应选项的内容</div>
<div class="tabContent" style="display: none;"> 这里是对应选项的内容</div>
<div class="tabContent" style="display: none;"> 这里是对应选项的内容</div>
</div>

<script type="text/javascript">
(function(){
function createTab(root){
var menus = getElementsByClassName("tabMenu",root),
contents = getElementsByClassName("tabContent",root);
for(var i = 0,n=menus.length;i<n;i++){
(function(n){
menus[n].onclick = function(){
showContent(n);
}
})(i);
}

function showContent(index){
for(var i=0,n=contents.length;i<n;i++){
if(i==index){
contents[i].style.display = "block";
} else {
contents[i].style.display = "none";
}
}
}
}

createTab("demo5-1");
createTab("demo5-2");
})();
</script>

Answer 1

if(i==index){
contents[i].style.display = "block";
} else {
contents[i].style.display = "none";
}

把你的上面这段换成下面的试试

if(i==index){
	contents[i].style.display = "block";
	contents[i].style.color = "red";
} else {
	contents[i].style.display = "none";
	contents[i].style.color = "black";
}

追问

无效

追答

换成

menus[i].style.color = "red";

追问

点击后是变红了，但是会出现这样的情况：
点营业中：营业中变红了；
再点可订餐：营业中和可订餐都红了；
再点待营业：3个选项都红了，也就是说，点其他选项后，没有取消上一次的变红动作。而且也没有让营业中成为默认的红色

啊啊啊，我错了，我写错black了，能转换，只剩下没有让营业中成为默认的红色

追答

呃..那现在这是解决了还是还有问题?