div 点击切换按钮样式

最新推荐文章于 2024-05-07 14:16:41 发布

这里是北京

最新推荐文章于 2024-05-07 14:16:41 发布

阅读量2k

点赞数 3

文章标签： css div点击样式变化

本文链接：https://blog.csdn.net/qq_14965807/article/details/61429405

版权

首先，大家需要定义两个css 样式，一个为选中后的样式，另一个是不被选中的样式，这里做一个例子：

.selectMenu{cursor:pointer;width:100%;height:30px; float:left;margin-top:3px;font-family : 微软雅黑; background-image: url('../image/backgroundimage.png');}
.selectMenu p{cursor:pointer;color: #FFFFFF;float:left;font-size:14px; margin-left:10%;margin-top:5px;font-family : 微软雅黑; }
.noSelectMenu{cursor:pointer;width:100%;height:30px; float:left;margin-top:3px;font-family : 微软雅黑;}
.noSelectMenu:hover{background-image: url('../image/backgroundimage.png')}
.noSelectMenu:hover p{color: #FFFFFF}
.noSelectMenu p{cursor:pointer;color: #696969; float:left;margin-left:10%;margin-top:5px;font-family : 微软雅黑;}

上面示例中的图片大家可以自己换上自己的图片，以上css 的样式主要是定义了div选中后的样式及未选中的按钮样式。

接下来我们要做的就是写js ，选中div 的时候，变换div 的class 样式就可以了。

javascript 写法：

<script type="text/javascript" >
	function exec() {
		var lastIndex = 0;
		var divs = document.getElementsByName("selectMenu");
			for (var i = 0; i < divs.length; ++i) {
				(function(i) {
						divs[i].onclick = function() {
						divs[lastIndex].className = "noSelectMenu";
						
						lastIndex = i;
						divs[i].className = "selectMenu" ;
					}
				})(i);
			}
	}
	
	
	</script>

页面中的div 示例;

<div class="selectMenu" name="selectMenu">
			 	<p>菜单</p>
			 	 </div>
<div class="noSelectMenu" name="selectMenu">
			 	<p>
			 	菜单1
			 	</p>
			 	</div>
<div class="noSelectMenu" name="selectMenu">
			 	<p>菜单2</p>
			 	</div>

好了，大家写完之后，可以去点击看一下这几个div 的样式变化啦，是不是很简单呢？

点个赞吧，反正也不花钱！！