js怎么实现点击循环切换颜色
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js怎么实现点击循环切换颜色相关的知识，希望对你有一定的参考价值。
就是只有一个背景白色的div框，点击一下换成红色色，再点下又变回白色，可以循环点击。只通过js改变css实现，
求详解
...........................................
你可以先将要出现的颜色，存储到一个数组里，点击时切换数组里的元素就可以了。
下面是小例子：
<body><div style="width:100px; height:100px; border:1px solid #ccc;"></div>
</body>
<script>
var sColor = [\'red\',\'blue\',\'yellow\',\'gray\'];
var oDiv = document.getElementsByTagName(\'div\')[0];
var iNum = 0;
oDiv.onclick = function()
this.style.background = sColor[iNum%sColor.length];
iNum++;
;
</script> 参考技术A so easy
如果是多个颜色的话可以放到颜色数组里(自己建的数组里面放需要的颜色)
如果是两个颜色切换就更简单了,获取当前的颜色设置为不同的颜色即可本回答被提问者采纳 参考技术B 通过点击事件切换图片/背景色即可，可以通过一个全局变量来记录当前的状态，每次点击更改css和状态就行了
js实现选项卡
（一）思路：
选项卡就是点击按钮切换到相应内容，其实就是点击按钮把内容通过display(block none)来实现切换的。
1、首先获取元素。
2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。
3、因为点击当前按钮时会以高亮状态显示，所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none。
4、把当前按钮添加样式，把当前DIV显示出来，display设置为block。
注：给多个元素添加多个事件要用for循环历遍。如选项卡是点击切换，当前按钮高度，点击和按钮高亮就是2个事件，所以要用2个for循环历遍。
HTML代码：
<div id="box">
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="4" />
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
CSS代码：
Javascript代码：
<script>
window.onload=function()
{
var box=document.getElementById(‘box‘);
var input=box.getElementsByTagName(‘input‘);
var div=box..getElementsByTagName(‘div‘);
for(var i=0;i<input.length;i++)
{ //循环历遍onclick事件
input[i].index=i; //input[0].index=0 index是自定义属性
input[i].onclick=function(){
for(var i=0;i<input.length;i++)
{ //循环历遍去掉button样式和把div隐藏
input[i].className=‘‘;
div[i].style.display=‘none‘;
};
this.className=‘active‘; //当前按钮添加样式
div[this.index].style.display=‘block‘; //div显示 this.index是当前div 即div[0]之类的
};
};
};
</script>
以上是关于js怎么实现点击循环切换颜色的主要内容，如果未能解决你的问题，请参考以下文章