Implement mobile TAB touch screen Switching Based on JavaScript.

Implement mobile TAB touch screen Switching Based on JavaScript.

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.

<Div class = "box-163css"> <ul id = "pagenavi" class = "page"> <li> <a href = "# http://www.bkjia.com/css.html" class = "active"> CSS3 </a> </li> <a href = "# http://www.bkjia.com/jquery.html"> JAVASCRIPT </a> </li> <a href = "# http://www.bkjia.com/php.html"> PHP </a> </li> <a href = "# http://www.bkjia.com/web.html"> HTML5 </a> </li> </ul> <div id = "slider "class =" swipe "> <ul class =" box01_list "> <li class =" li_list ">. ... </Li>... <! -- A total of four li --> </ul> </div>

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.

<script type="text/javascript" src="js/zepto_min.js"></script> <script type="text/javascript" src="js/touchslider.js"></script>

Next, we will directly call TouchSlider to implement Content Switching by setting the binding tab, sliding direction, speed, time, and other information. Please refer to the detailed code:

<script type="text/javascript">   var page='pagenavi';   var mslide='slider';   var mtitle='emtitle';   arrdiv = 'arrdiv';   var as=document.getElementById(page).getElementsByTagName('a');   var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){     var as=document.getElementById(this.page).getElementsByTagName('a');     as[this.p].className='';     as[index].className='active';     this.p=index;     var txt=as[index].innerText;     $("#"+this.page).parent().find('.emtitle').text(txt);     var txturl=as[index].getAttribute('href');         var turl=txturl.split('#');     $("#"+this.page).parent().find('.go_btn').attr('href',turl[1]);   }});   tt.page = page;   tt.p = 0;   for(var i=0;i<as.length;i++){     (function(){       var j=i;       as[j].tt = tt;       as[j].onclick=function(){         this.tt.slide(j);         return false;       }     })();   } </script>

The above content is all described in this article, and I hope it will help you learn it.