自定义变量实例——tab栏切换

自定义属性 

自定义属性，开发者可以自己定义属性，并且使用属性值进行操作。

在tab栏切换中，就是运用到自定义属性记录索引号，使选项与内容进行匹配显示。

自定义变量主要有以下三种操作

获取自定义属性值：

element.属性 —— 获取内置属性的值

element.getAttribute('属性') —— 获取自定义属性的值

设置自定义属性值：

element.setAttribute( '属性' , '属性值' ) 

移除自定义属性：

element.removeAttribute('属性') 

 

H5新增的自定义属性

 H5的新规范：在设置自定义属性的属性名前加 date-

 tab_list[i].setAttribute('date-index', i);

 

实例——tab栏切换

问题描述：实现tab栏切换：th中的每一个li对应下面中的ul 

业务需求：当选中tab_list中的li时，变成当前li的状态。同时选项卡对应的内容也显示出来

需求一：点击选项卡，变色。获取事件源 选项卡li

需求二，当前选中的选项卡被点击时，对应的内容部分也显示

 

技术点：排他思想、循环注册事件、鼠标点击事件、自定义属性匹配索引号

Javascript代码：

 

效果：

 

 

问题总结

其实在单独完成的过程中遇到了问题，没错，就是自定义属性的问题。应该把属性定义给选项卡的li，因为每一个li对应一个div的内容。通过li的索引号来判断应该显示哪个内容。div的排列与li的索引号一一对应，位置摆放的很规整，这样有利于查找。还有就是在这个案例中两次运用到排他思想，主要是一组元素实现的是同一效果，又是循环注册事件，会同时显示效果，排他思想很好的解决了问题。

总的来说吧，案例要是能独立完成就独立完成，要是遇到问题解决不了，就去网上搜搜，看看别人的代码。当自己有烦躁、浮躁、焦虑等负面情绪的时候，就把这些典型案例再敲一遍，这个想法是受到学长的影响才有的。

加油加油加油啊！！！！

每天进步一点点，当自己回头看的时候，原来自己已经走的那么远了。

 

全部代码：

    
    
    
    



    
    

        

            

                
商品介绍
                
规格与包装
                
售后保障
                
商品评价(50000)
                
手机社区
            
        
        

            
商品介绍内容
            
规格与包装内容
            
售后保障内容
            
商品评价(50000)内容
            
手机社区内容