用angularjs写，点击盒子变色其他盒子恢复原色

最新推荐文章于 2024-06-19 20:30:31 发布
最新推荐文章于 2024-06-19 20:30:31 发布
阅读量1.9k 收藏
点赞数
分类专栏： angularjs 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript" src="angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("testCtrl", function($scope){
    $scope.data = [0,1,2,3,4];
    $scope.isCurrent = function(index){
        $scope.bg = [];
        $scope.bg[index] = 'current';
    }
});
</script>
<style>
ul { margin:100px auto; width:1120px; <a href="https://www.baidu.com/s?wd=list-style&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3PyuWuH-hn1IbPWI9PyfL0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q1mkP161PWmsPW6Lrj0knHR1n6" target="_blank" class="baidu-highlight">list-style</a>:none}
ul li { display:block; width:200px; height:200px; background:#efefef; border:solid 1px #000; float:left; margin:10px; cursor:pointer}
.current { background:#f00}
</style>
</head>
  
<body ng-app="myApp">
<ul ng-controller="testCtrl">
    <li ng-repeat="item in data" ng-class="bg[$index]" ng-click="isCurrent($index)"></li>
</ul>
</body>
</html>

上面的写复杂了，

html:


    <li ng-repeat="item in data" ng-class="{activedClass:$index==activerow}" ng-click="isCurrent($index)"></li>
js: 

$scope.activerow=0; //默认第一个项目加上class
$scope.isCurrent = function(index){<span style="white-space:pre">	</span><pre name="code" class="javascript">$scope.activerow = index;
} 

 

 

 


                

        

        

    

  


    

      

        

            

              
                
                  元生态
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
AngularJS点击添加样式、点击变色设置的实例代码

				
			

			

				

					10-19
				

			

		

		

			
				
在AngularJS中，实现元素的动态样式添加和点击变色是一项常见的需求，特别是在构建交互式用户界面时。本文将深入探讨如何使用AngularJS的`ng-class`指令来完成这一任务，通过一个具体的实例代码来详细解析实现过程。...

			
		

	



                

              
                



	

		

			

				
					
angJs使选中的li背景颜色不同

				
			

			

				

					
				

				

					05-12
					
					126
					
				

			

		

		

			
				
<!doctype html><html><head><meta charset="UTF-8"><title>test</title><script type="text/javascript" src="../js/angular-1.2.22.js" ></script><scri...

			
		

	



                


  
              

                


	

		

			

				
					
Angularjs中的ng-repeat

				
			

			

				

					Gikieng的奋斗路
				

				

					08-25
					
					683
					
				

			

		

		

			
				
ng-repeat 指令用于循环输出指定次数的 HTML 元素。集合必须是数组或对象。例如：<input ng-repeat="x in records" value="{{x}}/><script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.record

			
		

	





	

		

			

				
					
angularjs下ng-repeat点击元素改变样式实现

				
			

			

				

					Maci_yera的博客
				

				

					07-21
					
					4058
					
				

			

		

		

			
				
1.一个angularjs的学习，了解ng-class的使用技巧；2.代码： html：
 <div ng-repeat='myimg in myimgs'>
            <img ng-src="{{myimg}}" ng-click="fabricChoose($index)"  ng-class="{fabricImg1:$index==fabricIsSelected}">
 <

			
		

	



		

			
		



	

		

			

				
					
js点击当前链接背景变色其他链接恢复原来背景色

				
			

			

				

					Return_KB的博客
				

				

					01-10
					
					2368
					
				

			

		

		

			
				
可能大家都见过这样的效果，点击一个链接背景会变色，当再点击其他链接的时候，之前被点击的链接背景颜色又会恢复。下面就通过代码实例介绍一下如何实现此效果。
代码如下:
[HTML] 纯文本查看 复制代码运行代码01020304050607080910111213141516171819202122232425262728293031323334353637383940414243444546474

			
		

	





	

		

			

				
					
js中tab栏切换，点击当前li变色，同时切换内容，默认选中第一个

				
			

			

				

					爬楼梯的前端小白的博客
				

				

					07-29
					
					2867
					
				

			

		

		

			
				
js中的tab栏，导航栏制作，点击当前li，显示对应盒子里的内容

			
		

	





	

		

			

				
					
AngularJS实现按钮提示与点击变色效果

				
			

			

				

					10-21
				

			

		

		

			
				
在本篇文章中，作者通过具体的实例代码，详细阐述了如何使用AngularJS框架实现按钮在被点击时出现提示信息以及改变按钮的样式。以下知识点涵盖了从基础到实现细节的多个方面。  ### AngularJS基础  AngularJS是...

			
		

	





	

		

			

				
					
Js实现当前点击a标签变色突出显示其他a标签回复原色

				
			

			

				

					10-26
				

			

		

		

			
				
综上所述，实现点击a标签变色并突出显示当前标签，同时让其他标签恢复原色的效果，我们可以通过以下几种方法来完成：  - 利用JavaScript通过查询参数获取当前被点击的a标签，并改变其样式。 - 使用JavaScript遍历...

			
		

	





	

		

			

				
					
HTML学习记录

					
最新发布

				
			

			

				

					Sy_planA的博客
				

				

					06-19
					
					165
					
				

			

		

		

			
				
使用JavaScript来实现点击盒子改变颜色的功能。

			
		

	





	

		

			

				
					
JS点击切换盒子背景颜色

				
			

			

				

					sinat_49951734的博客
				

				

					10-17
					
					2410
					
				

			

		

		

			
				
JS点击切换盒子背景颜色。

			
		

	





	

		

			

				
					
实现效果：一个组件中三个相同的盒子，要点击其中一个盒子改变其背景色，点击另一个盒子改变另一个盒子背景色

				
			

			

				

					ni15534789894的博客
				

				

					05-08
					
					1258
					
				

			

		

		

			
				
非常笨的一种方法哈，大家如果有好的方法，叫一下博主，我也去学习。
<template>
  <div>
    <div class="one" @click="changeColorOne"></div>
    <div class="two" @click="changeColorTwo"></div>
    <div class="three" @click="changeColorThree"></div&

			
		

	





	

		

			

				
					
js实现点击盒子后修改颜色和宽度

				
			

			

				

					黄大仙
				

				

					08-04
					
					3349
					
				

			

		

		

			
				
<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

<div></div>
<script>
    var div = document.querySelector('div');
    div.onclick = functio

			
		

	





	

		

			

				
					
angularJs中的ng-class动态改变样式

				
			

			

				

					泠泠似水
				

				

					05-28
					
					1万+
					
				

			

		

		

			
				
exam1.html<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="angular.min.js"></script>
</head>
<body>
<style>
    .lock {
        background : #dcdcdc;
    }    .red {

			
		

	





	

		

			

				
					
JS首先使用div标签定义一个盒子，点击盒子来控制盒子的大小以及颜色。（1）盒子自身颜色为蓝色（2）第一次点击盒子区域，盒子变小并且颜色变黑色（3）再一次点击盒子区域，盒子恢复原来大小，但盒

				
			

			

				

					WHT869706733的博客
				

				

					11-25
					
					4018
					
				

			

		

		

			
				
首先使用div标签定义一个盒子，点击盒子来控制盒子的大小以及颜色。

（1）盒子自身颜色为蓝色

（2）第一次点击盒子区域，盒子变小并且颜色变黑色

（3）再一次点击盒子区域，盒子恢复原来大小，但盒子颜色变成红色

要求：使用两种方式实现，第一种将盒子样式写在<script></script>代码里，第二种将盒子样式写在<style></style>


<!DOCTYPE html>
<html lang="en">
<head

			
		

	





	

		

			

				
					
超链接（按钮）点击变色，原来的恢复原色

				
			

			

				

					K先生的博客
				

				

					04-03
					
					1万+
					
				

			

		

		

			
				
网页超链接（按钮）点击变色，原来的恢复原色，这里所说的并不是利用css的link、hover、active所实现的，而是利用一小段js代码实现的。实现的效果为：我们看电影的时候，我们点击哪一集的链接，那么这个链接就会唯一变色，并且不会像css中的active失去焦点后恢复原色，能实时显示当前用户观看的电影集数。

原理：先定义一个变量t用来记录用户上一次点击的超链接id，当用户点击超链接的时候，会...

			
		

	





	

		

			

				
					
AngularJS点击添加样式、点击变色设置

					
热门推荐

				
			

			

				

					xyphf的博客
				

				

					11-14
					
					1万+
					
				

			

		

		

			
				
首先解释需求是这样的，有个列表，当你点击哪一行时，哪一行背景变成灰色，在JQ中，大家都知道，这是非常容易的，加一个addClass就行了，那么AngularJS如何实现呢？下面我们看代码部分<!doctype html>
<html ng-app="a2_11">
<head>
    <title>添加元素样式</title>
    <script src="../Script/angular.

			
		

	





	

		

			

				
					
js四个盒子点击变色其他三个不变

				
			

			

				

					05-30
				

			

		

		

			
				
可以通过给每个盒子绑定点击事件，在事件处理函数中修改当前点击的盒子的颜色，同时将其他三个盒子的颜色恢复为原来的颜色。

以下是一个简单的实现示例：

HTML代码：

```html
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
```

CSS代码：

```css
.box {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin-right: 10px;
  background-color: gray;
  cursor: pointer;
}

.selected {
  background-color: blue;
}
```

JavaScript代码：

```javascript
var boxes = document.querySelectorAll('.box');

for (var i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener('click', function() {
    // 将当前点击的盒子的颜色修改为蓝色
    this.classList.add('selected');
    
    // 将其他三个盒子的颜色恢复为灰色
    for (var j = 0; j < boxes.length; j++) {
      if (boxes[j] !== this) {
        boxes[j].classList.remove('selected');
      }
    }
  });
}
```

在上面的代码中，我们首先获取所有的盒子元素，然后给每个盒子元素绑定点击事件。在事件处理函数中，我们首先将当前点击的盒子的颜色修改为蓝色，然后遍历其他三个盒子，将它们的颜色恢复为灰色。这样就实现了点击一个盒子变色，其他三个盒子不变色的效果。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值