jquery多选项卡效果实例代码(附效果图)_jquery

复制代码 代码如下:

附上html代码

复制代码 代码如下:

   
   

Designer Name Order A to G

   

       

       
• Designer Name A

       
• Designer Name B

       
• Designer Name C

       
• Designer Name D

       
• Designer Name E

       
• Designer Name F

       
• Designer Name G

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

       
       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

   

   
   

Designer Name Order H to N

   

       

       
• Designer Name H

       
• Designer Name I

       
• Designer Name J

       
• Designer Name K

       
• Designer Name L

       
• Designer Name M

       
• Designer Name N

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

               
       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

                       
       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

   

 

   
   

Designer Name Order O to T

   

       

       
• Designer Name O

       
• Designer Name P

       
• Designer Name Q

       
• Designer Name R

       
• Designer Name S

       
• Designer Name T

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

               
       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

               
       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

               
       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

   

   
   

Designer Name Order U to Z

   

       

       
• Designer Name U

       
• Designer Name V

       
• Designer Name W

       
• Designer Name X

       
• Designer Name Y

       
• Designer Name Z

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

       

           

               

               

                   
                    {$i.user_name}
                   
               

               

           

           

           

       

   

页面效果：

页面比较杂乱，你可以看到很多选项卡，而且有多个选项卡，点击每个选项，内容发生变化，而且颜色也改变。