本文共 1125 字，大约阅读时间需要 3 分钟。

排他思想

概念

排他思想：如果有同一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想算法

1. 所有元素全部清除样式
2. 给当前元素设置样式
3. 注意顺序不能颠倒

案例

效果如上图所示。

当鼠标点击一个按钮时，该按钮背景颜色改变，其余按钮颜色不变；当鼠标点击另外一个按钮时，那个按钮背景颜色发生改变，其余按钮背景颜色恢复原样。

代码

按钮按钮按钮按钮按钮

tab栏切换布局

效果

效果如上图所示。

当鼠标点击上方的tab栏时，下方的区域显示对应的内容。，如下图所示。

核心思想

1. 上方tab栏部分用到了排他思想，背景颜色和字体颜色发生变化，其余样式不变；设置自定义属性，用于充当索引号。
2. 当鼠标点击上方的li时，下方的内容区域获取一一对应的自定义属性，并赋值给下方的变量index当索引号。

知识点补充

自定义属性操作

自定义属性目的：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中。

1. 获取属性值 div.属性 ： 获取属性值 div.getAttribute(‘属性’);
   ※区别：div.属性获取内置属性值（元素本身自带的属性）；
   div.getAttribute(‘属性’);主要获取自定义的属性（程序员自定义的属性）
2. 设置属性值
   div.属性=‘值’; // 设置内置属性
   div.setAttribute(‘属性’,‘值’); // 主要针对自定义属性
   ※注意：如果想改类名，第一个方法要用className，第二个方法就是class
   div.className=‘新类名’;
   div.setAttribute(‘class’,‘新类名’);
3. 移除属性 div.removeAttribute(‘所要移除的属性’)

代码

   
    
    
        
     
            
      
商品介绍
            
      
规格与包装
            
      
售后保障
            
      
商品评价（5000）
            
      
手机社区
        
     
    
    
    
    
        
     
      商品介绍模块内容
     
        
     
      规格与包装模块内容
     
        
     
      售后保障模块内容
     
        
     
      商品评价（5000）模块内容
     
        
     
      手机社区模块内容
     
    
    
   

转载地址：https://blog.csdn.net/zx2014567296/article/details/117993636 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！