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}
                   
               

               

           

           

           

       

       

           

               

                   
   user_name}
                   
          

＆lt;/div＆gt; ＆lt; div class =“imgspanel”＆gt;＆lt;＆lt;/div＆gt＆gt; ＆lt class =「 imgspanel」 ;

       

        

               

                          {$i. user_name}
                   
          

＆lt;/div＆gt; ＆lt; div class =“imgspanel”＆gt;＆lt;＆lt;/div＆gt＆gt; ＆lt class =「imgspanel」;
   

頁面效果：




頁面比較雜亂，你可以看到很多選項卡，而且有多個選項卡，點擊每個選項，發生內容變化，而且顏色也改​​變。