【Javascript】【jQuery】jQuery实现Tab页切换功能

    
        

            
 Tab A
            
 Tab B
            
 Tab C
        

        

            
这是第一个Tab页面的内容
            
这是第二个Tab页面的内容
            
这是第三个Tab页面的内容
        
    

    
        #tab {
            margin: 0px;
            padding: 0px;
            display: block;
            overflow: auto;
        }

        #v {
            width: 600px;
            height: 400px;
            background: yellow;
        }

        #tab > li {
            float: left;
            width: 200px;
            height: 50px;
            cursor: pointer;
            list-style: none;
            background: skyblue;
            margin: 1px;
        }
    

    
    
        $(() => {
            //设置Tab页面样式
            $("#v2").css("display", "none");
            $("#v3").css("display", "none");

            //Tab标签事件监听
            $("#tab>li").click(function () {
                let index = $(this).index();
                $("#v>div").css("display", "none");
                $("#v>div")[index].style.display = "block";
            });
        });