利用原型实现选项卡被选中状态的改变

最新推荐文章于 2024-03-05 14:27:54 发布
最新推荐文章于 2024-03-05 14:27:54 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： 前端 JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Firoly/article/details/55259378
版权
本文通过一个实例介绍如何利用JavaScript的原型概念来实现选项卡的选中状态切换。通过点击事件，结合HTML和CSS，实现选项卡的样式变化。
摘要由CSDN通过智能技术生成

原型应该算是JS中的高级部分，在看这一部分的时候也是迷糊，索性直接用一个实例来帮助理解。

如图所示，如果想实现 这种点击之后选项卡卡中的选项的样式等发生改变，其实是很简单的一个点击事件方法就行了，这次用原型来实现一下。

            



在html和css的代码完成之后，就可以看到第一张图的样式，剩下的就是JS代码了：


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Firoly
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
实现简易选项卡功能

				
			

			

				

					乌龟不背壳
				

				

					12-31
					
					246
					
				

			

		

		

			
				

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现简易选项卡功能</title>
    <link rel="stylesheet" href="

			
		

	



                

              
                



	

		

			

				
					
css 制线条选项卡 选中状态

				
			

			

				

					boys1999的专栏
				

				

					02-03
					
					1356
					
				

			

		

		

			
				
/*
	1.外框显示底边框
	2.选项卡显示四边边框
	3.选中选项卡底边框变色达到选中效果
*/
.hd{width:800px; height:40px; border-bottom:solid 1px #00ff00; }
.tit{
	width:100px;
	border-bottom: 1px solid #ff0000;
	color: #666;
	line-height:40p

			
		

	



                


  
              

                


	

		

			

				
					
原型状态控制

				
			

			

				

					walking
				

				

					08-16
					
					826
					
				

			

		

		

			
				
原型为了展示，必须便于在不同状态间切换。
原型可以通过正常操作展现所有状态？
可以，但不方便，要填很多表单数据。
单独的状态控制很有必要



状态控制的两种实现思路：
一种是修改状态变量，然后刷新页面，在页面事件判断并自动调整显示，变量控制方式
另一个思路则不使用页面事件，而是直接用状态控制元素调整页面局部的显示，即元素控制方式，




表面上是元素控制的方式更方便

			
		

	





	

		

			

				
					
《原型图之选项卡》

				
			

			

				

					杨晓风 迷迭香的记忆
				

				

					07-24
					
					1036
					
				

			

		

		

			
				
前言:
         自学习以来，经历了VB百例、学生信息管理系统、第一次机房收费系统、机房收费系统重构版等内容都涉及到了选项卡的问题，在相应的软件开发环境中，选项卡作为一个控件，只需要轻轻一拖拽到相应的窗体上，一个成形的选项卡就华丽丽地呈现在我们的面前。然而在机房收费系统合作版，秉持文档驱动的理念，正式地按照软件开发的流程进行，进而在画原型图时学习了如何制作选项卡，下面小编就为大家详细解说

			
		

	



		

			
		



	

		

			

				
					
标签”选中”状态

				
			

			

				

					weixin_34331102的博客
				

				

					08-13
					
					360
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
利用vue.js实现被选中状态的改变方法

				
			

			

				

					12-29
				

			

		

		

			
				
在使用原型实现使不选中状态改变之后，接触到vue，就想着能不能使用vue再把功能实现一边，在上篇中的页面并没有动态实现页面，所有的数据也都是直接写在html中。而使用vue之后，已经能够实现页面根据数据的多少动态...

			
		

	





	

		

			

				
					
js实现简单选项卡制作

				
			

			

				

					10-14
				

			

		

		

			
				
在本文中，我们将探讨如何使用JavaScript实现一个简单的选项卡组件。选项卡是一种常见的用户界面元素，用于组织和展示多个相关的但不同时显示的内容块。在这个例子中，我们将创建一个包含HTML、CSS和JavaScript三个...

			
		

	





	

		

			

				
					
利用FPGA实现原型板原理图的验证

				
			

			

				

					12-04
				

			

		

		

			
				
因此，利用FPGA（现场可编程门阵列）来实现原型板原理图的验证成为了一种经济且有效的解决方案。这种方法尤其适用于那些需要在硬件设计完成前就开始软件开发的情况。  首先，FPGA的优势在于其可编程性，能够快速地...

			
		

	





	

		

			

				
					
分步解析JavaScript实现tab选项卡自动切换功能

				
			

			

				

					11-26
				

			

		

		

			
				
总的来说，这个JavaScript实现的选项卡自动切换功能利用了DOM操作、事件监听和定时器，实现了平滑且自动的选项卡切换效果。开发者可以根据自己的需求调整参数，如切换间隔时间、选中样式等，以适应不同的应用场景。...

			
		

	





	

		

			

				
					
JS学习笔记之原型链和利用原型实现继承详解

				
			

			

				

					12-03
				

			

		

		

			
				
本文实例讲述了JS学习笔记之原型链和利用原型实现继承。分享给大家供大家参考，具体如下：  原型链 原型链是一种关系，实例对象和原型对象之间的关系，关系是通过原型(__proto__)来联系的 实例对象中有__proto__,是...

			
		

	





	

		

			

				
					
用函数制作简单的选项卡

				
			

			

				

					weixin_34179762的博客
				

				

					11-30
					
					231
					
				

			

		

		

			
				
2016年11月30日，星期三  1.样式代码：   2.设置div：3.函数：4.完成图：
				
转载于:https://blog.51cto.com/12254251/1878288...

			
		

	





	

		

			

				
					
js 选项卡制作

				
			

			

				

					weixin_30952535的博客
				

				

					12-12
					
					116
					
				

			

		

		

			
				
知识回顾，制作JS选项卡，仅供参考
html代码：


 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>选项卡</title>
 6   <style>
 ...

			
		

	





	

		

			

				
					
HTML+JS+websocket 实现联机“游戏王”对战（五）- 卡片选中系统

				
			

			

				

					KalsasCaesar的博客
				

				

					04-15
					
					1026
					
				

			

		

		

			
				
I.卡片选中系统
大部分卡片的操作功能都是针对单张卡片的，比如召唤，盖卡，回到卡组，返回手牌，送去墓地。执行这些操作前玩家必须先选定需要操作的对象，即某一张卡片。这个时候我们就需要建立一个卡片选中系统，在玩家选定卡片时记录该卡的相关信息，以便我们对选中的卡片执行相应的操作。

1.全局变量：
首先我们需要一个用来随时存储被选中卡片相关信息的全局对象 SelectedCard:
var SelectedCard = {  //被选中的卡对象
    type: "null",  //卡的来源类型（手牌，场上.

			
		

	





	

		

			

				
					
使用面向对象思维制作轮播图（构造函数模式+原型模式）

				
			

			

				

					weixin_43734973的博客
				

				

					01-21
					
					782
					
				

			

		

		

			
				
 

最近看了一位大佬的博客，讲的是他对面向对象思维的理解，我看了也受益良多，所以活学活用利用面向对象思维制作了一个具有完整功能的轮播图：



功能：

点击图片两侧的黑灰色按钮可以实现页面的前后切换。
	点击图片下面的小圆点可以实现指定跳转。
	使用定时器，实现图片的自动轮播。
代码：


&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;hea...

			
		

	





	

		

			

				
					
css伪元素实现选中卡片的角标

				
			

			

				

					FJ101113的博客
				

				

					11-22
					
					783
					
				

			

		

		

			
				
用css伪元素实现选中卡片的角标

			
		

	





	

		

			

				
					
CSS实现选中卡片样式操作

					
最新发布

				
			

			

				

					甄_的博客
				

				

					03-05
					
					539
					
				

			

		

		

			
				
CSS实现选中卡片操作， 图一默认自动选中，并且不可取消选中，当选择其他卡片才可点击下一步。在  “ src/assets ” 路径下存放  save.png。

			
		

	





	

		

			

				
					
CSS模拟android电视盒子卡片选中变大特效

				
			

			

				

					cichang8016的博客
				

				

					03-31
					
					341
					
				

			

		

		

			
				
所有CSS样式： 
/*基础样式*/
body{
	padding:40px;
	background-color:#333;
}
.cardimg{
	height:100%;
	width:100%;
}
.card{
	background:#FFFFFF;
	w...

			
		

	





	

		

			

				
					
微信小程序swiper实现左右滑动效果 选中卡片适当放大  亲测有效

				
			

			

				

					weixin_42562044的博客
				

				

					08-24
					
					2064
					
				

			

		

		

			
				
先上图

最近在公司中看到这样的效果，于是自己也上网参考，并写了一下
wxml
<swiper class="swiper-block" previous-margin="90rpx" next-margin="90rpx" current="0" bindchange="swiperChange">
  <block wx:for="{{imgUrls}}" wx:index="{{index}}">
    <swiper-item class="swiper-item"&

			
		

	





	

		

			

				
					
使用Axure RP9 实现Tab选项卡切换选中功能

				
			

			

				

					qq_53821346的博客
				

				

					03-15
					
					5993
					
				

			

		

		

			
				
在学习使用Axure RP9软件绘制原型图的过程中，遇到需要实现Tab选项卡切换的交互效果，现将制作思路记录下来

			
		

	





	

		

			

				
					
交互原型设计：实战——淘宝登录页签的切换效果.pptx

				
			

			

				

					07-14
				

			

		

		

			
				
在这个案例中，设计师通过清晰的标题指示、明显的状态变化以及适当的色彩对比，确保了用户能直观地理解和操作登录流程。这样的设计方法在现代UI设计中非常常见，特别是在复杂应用程序和网站的交互设计中。

			
		

	



              



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

  

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

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值