HTML层级菜单和选项卡练习

总结：
实现原理：本质是通过Jquery代码来设置菜单元素点击时给内容应用不同的css样式来实现。通过给元素动态增加类名去除类名来实时更新对应的类选择器样式。
css部分：
菜单内内容通过css样式中的display属性默认设置为隐藏display: none，新建一条样式选择器，通过class来选择元素，设置该样式的display属性为显示display: block。这里是对同一个样式属性display进行操作，要注意样式权重问题。行内式样式权重1000，id 100，类及伪类 10，标签1。
javascript部分：
通过Jquery找到对应的元素对象设置点击事件的执行代码，并且利用Jquery选择器转移获取到其他元素对象，通过Jquery中封装的样式操作方法toggleClass（“myclass”）//切换设置，有则删除无则添加、removeClass(“myClass”) ,给内容元素设置class类名，从而样式通过类名找到该元素更新样式

Demo：




    
    
    
    
    
    
    


    

        

            phone
            

                
111
                
222
                
333
            
        
        

            PC
            

                
444
                
555
                
666
            
        
        

            pad
            

                
777
                
888
                
999
            
        

    
    

        

            
            
            
            
        
        

            
content1
            
content2
            
content3
        
        
    
    

运行效果：