Implement mobile TAB touch screen Switching Based on JavaScript _ javascript skills

When using the mobile terminal, We can slide left and right through the touch screen gesture to switch the TAB column, such as Netease news and other APP columns. The TAB we mentioned is generally composed of the navigation bar and the content corresponding to the TAB. The tabs on the navigation bar are switched and the corresponding content of the TAB is also switched. This article will introduce you to a mobile terminal with the help of examples. As shown in the following figure:

Download demo source code

When using the mobile terminal, We can slide left and right through the touch screen gesture to switch the TAB column, such as Netease news and other APP columns. The TAB we mentioned is generally composed of the navigation bar and the content corresponding to the TAB. The tabs on the navigation bar are switched and the corresponding content of the TAB is also switched. This article will introduce you to a mobile terminal with the help of examples.

HTML

We have prepared a TAB navigation # pagenavi, which contains the four navigation buttons to be switched for the TAB navigation, and then the main content to be switched # slider. Here we should place four li maps with the navigation buttons, custom content.

   
 
 
     
  
  
Http://www.jb51.net/css.html "class =" active "> CSS3
      
  
  
Http://www.jb51.net/jquery.html> JAVASCRIPT
     
  
  
Http://www.jb51.net/php.html> PHP
     
  
  
Http://www.jb51.net/web.html> HTML5
   
 
 
   
    
 
 
     
  
  
...
...
      
 
 
   
 

Of course, we also need to add css styles to HTML. In this example, we have packed the css file for you to download.

JAVASCRIPT

Because it is a mobile application, we load zepto. js, and zepto is a small jquery. Then you need to load the touch screen slide plug-in touchslider. js.