点击哪个按钮对应图片显示，按钮对应颜色显示

最新推荐文章于 2019-11-03 10:46:27 发布
最新推荐文章于 2019-11-03 10:46:27 发布
阅读量701 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuoququer/article/details/78069792
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>

<!--neirong-->
<style>
.neirong_box{ width:100%; background-color:#f0f0f0; border-top:1px solid #e6e6e6; padding-top:25px; margin-top:30px;}
.neirong{ width:1100px; margin:0 auto; }
.pic{ width:546px; float:left; position:relative;background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 2.79px 0.21px rgba(191, 191, 191, 0.004);}
.pic img{ width:546px; height:417px;}
.dot{ position:absolute; bottom:1%; right:5%; }
.dot span{ float:left; margin-right:10px;border-radius: 50%;background-color: rgb(240, 240, 240);;width: 15px;height: 15px;}
.dot .current_dot{background-color:#34759e;  }

</style>
<div class="neirong_box">
    <div class="neirong">
        <div class="pic"> 
         <img src="img/b0.png" alt="" /> 
         <img src="img/b2.png" alt="" /> 
         <img src="img/b3.png" alt="" />
         <div class="dot">
            <span></span>
            <span></span>
            <span></span>
        </div>
      </div>
    </div>
</div>
<script src="jquery.js"></script> 
<script >

//neirong	
//$(function(){		
//	$(".dot span:eq(0)").addClass(" current_dot")
//	$(".pic img").hide().first().show()
//	 var n=0
//	 $(".dot span").mouseenter(function(){
//		 
//		 
//			 n=$(this).index()
//		 $(".pic img").hide().eq(n).show()
//		 })
//		
//$(".dot span").mouseenter(function(){
//		$(this).addClass(" current_dot")
//		 .siblings().removeClass(" current_dot")
//		})			
//	})
	
	
//  简洁压缩版
 $(function(){
	$(".dot span:eq(0)").addClass(" current_dot")
	$(".pic img").hide().first().show()
    $(".dot span").mouseenter(function(){
		$(".pic img").hide().eq($(this).index()).show()
		$(this).addClass(" current_dot")
		.siblings().removeClass(" current_dot")
		})
	})	
	

</script>
</body>
</html>










                

        

        

    




    

      

        

            

              
                
                  zuoququer
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
点击按钮显示对应图片——ppt电子相册模板.rar

				
			

			

				

					09-08
				

			

		

		

			
				
点击爱心按钮显示对应大图片，可以把安心按钮修改成小缩略图，点击互动ppt电子相册模板。

			
		

	



                

              
                



	

		

			

				
					
jQuery实现点击菜单显示对应图片

				
			

			

				

					一杯清茶的博客
				

				

					02-19
					
					1415
					
				

			

		

		

			
				
jQuery实现点击菜单显示对应图片
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
	a{
		text-decoration: none;
	}
	.tab-a {
	    display: inline-block;
	    padding: 5px 0;
	    

			
		

	



                


  
              

                


	

		

			

				
					
MFC中改变按钮颜色的方法

					
热门推荐

				
			

			

				

					zxccaoya的博客
				

				

					01-06
					
					3万+
					
				

			

		

		

			
				
1.使用CMFCButton类
MFC自带的MFC Button Control控件等按钮可以修改颜色，还能添加图片，设置字体颜色等。这些控件就在工具箱的下面，前面带MFC开头的那些。
在需要改颜色的地方调用m_btn.SetFaceColor(RGB(0, 255, 0));即可。


CMFCButton中的SetFaceColor（）可能会显示不出颜色，需要设置
m_button

			
		

	





	

		

			

				
					
点击按钮显示图片的两种方法

				
			

			

				

					i2295301的博客
				

				

					10-29
					
					1万+
					
				

			

		

		

			
				
点击按钮显示图片的两种方法

			
		

	



		

			
		



	

		

			

				
					
Vue.js 点击按钮显示/隐藏内容

				
			

			

				

					06-21
				

			

		

		

			
				
如何使用vue进行按钮点击后指定区域内容隐藏，再次点击按钮隐藏内容显示。实现思路：首选需要设置一个属性为true(show:true)，然后使用v-if把show属性绑定到要显示与内容的标签身上，最后给点击按钮添加点击事件，当...

			
		

	





	

		

			

				
					
实现在图片对应位置显示按钮

				
			

			

				

					04-04
				

			

		

		

			
				
源码是一个实现在图片对应位置显示按钮，源码ImageLayout，ImageLayout实现在图片对应位置显示按钮，大家可以参考一下吧。

			
		

	





	

		

			

				
					
javascript实现点击单选按钮链接转向对应网址的方法

				
			

			

				

					10-23
				

			

		

		

			
				
主要介绍了javascript实现点击单选按钮链接转向对应网址的方法,涉及javascript鼠标事件及页面跳转的相关技巧,简单实用,具有一定参考借鉴价值,需要的朋友可以参考下

			
		

	





	

		

			

				
					
按钮对应相应的内容特效

				
			

			

				

					11-08
				

			

		

		

			
				
按钮对应相应的内容 按钮对应相应的内容 按钮对应相应的内容 按钮对应相应的内容 按钮对应相应的内容 按钮对应相应的内容 

			
		

	





	

		

			

				
					
点击按钮显示对应的图片

				
			

			

				

					Discovery
				

				

					08-10
					
					7182
					
				

			

		

		

			
				
img{display:none;}
    



    
        请选择
        图片1
        图片2
        图片3
        图片4
    




   var arr=["1.png","2.png","3.png","4.png"];
    var imgShow=document.getElementById('imgshow');
 

			
		

	





	

		

			

				
					
RN中点击切换颜色，点击另一个恢复原先颜色

				
			

			

				

					w的博客
				

				

					05-11
					
					6135
					
				

			

		

		

			
				
在这里有一个需求：按钮点击之后，切换颜色，点击另一个时，恢复原先颜色；接下来看我们怎么实现的吧，直接上代码；//首先构造函数声明变量
constructor(props) {
    super(props);
        this.state = {
            isPress:true,
}
    }
其次声明点击方法：
_refreshMsssage= (csid) =>{

			
		

	





	

		

			

				
					
对应按钮和颜色的切换

				
			

			

				

					xxx_1_1的博客
				

				

					08-01
					
					852
					
				

			

		

		

			
				
编写一个程序，创建一个AWT面板，该面板包含有三个不同颜色名称的桑按钮，单击每个按钮时应使窗口的背景颜色显示为相应的颜色。

public class Colortest extends Frame implements ActionListener{

    Button b1,b2,b3;
    Panel p=new Panel();

public static void main(S...

			
		

	





	

		

			

				
					
CSS给button添加背景颜色并给button中字体也添加颜色

				
			

			

				

					qq_39360565的博客
				

				

					11-03
					
					1万+
					
				

			

		

		

			
				
CSS可以将设置字体大小和设置字体样式的代码写上
在HTML文件中：
<button id="xxx" sstyle="background: #3d83fa;color: #fefefe">添加关键词</button>

效果图：


...

			
		

	





	

		

			

				
					
实现在html上点击一个按钮出现一张照片

				
			

			

				

					lalalalalala_的博客
				

				

					09-11
					
					2万+
					
				

			

		

		

			
				
代码：(部分)


	function reP(){
	document.getElementById('oImg').style.display = "block";
	}

			
		

	





	

		

			

				
					
前端按钮点击后显示黑色遮罩 显示对应内容

					
最新发布

				
			

			

				

					05-30
				

			

		

		

			
				
您可以通过以下几个步骤来实现前端按钮点击后显示黑色遮罩和对应内容的功能：  ...然后，它会显示与按钮对应的内容元素。  请注意，这只是一个简单的例子，您需要根据您的具体需求进行修改和扩展。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值