JavaScript实现简易tab栏切换内容栏

本文实例为大家分享了JavaScript实现简易tab栏切换内容栏的具体代码，供大家参考，具体内容如下

html+css部分

    
    
    
    
    
    
   


    

        

            

                
 1
                
2
                
3
            
        
        

            
1
            
2
            
3
        
    
    

原生js代码

var lis = document.querySelectorAll('li');
var divs = document.querySelector('.content').querySelectorAll('div');
  for(var i=0 ; i 
 

## jQuery方法

```javascript
//jQuer方法
        $(function(){
            $("li").click(function(){
                $(this).addClass("choose");//为当前点击的li添加样式
                $(this).siblings("li").removeClass("choose");//它的兄弟元素消除样式（排他）
                var index = $(this).index();//获取当前点击的li的index
                $(".content div").eq(index).show().siblings("div").hide();
                //通过index获取到相对应的内容框，通过show()显示出来，在选取它的兄弟元素隐藏,分解======》
                //$(".content div").eq(index).show()；
                // $(".content div").eq(index).siblings("div").hide()
            })
        })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。