How to implement jQuery mobile tab effect-JS Tutorial-php.cn

How to implement jQuery mobile tab effect

小云云

Release： 2018-01-22 14:02:37

Original

3104 people have browsed it

We will often come into contact with the tab function. In this article, we mainly introduce examples of jQuery realizing the Tab effect on the mobile terminal. Has very good reference value. Let's take a look with the editor below, I hope it can help everyone.

Rendering:

##The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <title>移动端Tab选项卡</title>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script>
  $(function() {
   $(".tab a").click(function() {
    $(this).addClass(&#39;curr&#39;).siblings().removeClass(&#39;curr&#39;);
    var index = $(this).index();
    number = index;
    $(&#39;.nav .content li&#39;).hide();
    $(&#39;.nav .content li:eq(&#39; + index + &#39;)&#39;).show();
   });
  })
 </script>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  p, input, textarea, button, a {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  ul, li, ol{
   list-style: none;
  }
  a {
   color: #323232;
   outline-style: none;
   text-decoration: none;
  }
  .border-b {
   position: relative;
  }
  .border-b:after {
   top: auto;
   bottom: 0;
  }
  .border-t:before, .border-b:after {
   content: &#39;&#39;;
   position: absolute;
   left: 0;
   background: #ddd;
   right: 0;
   height: 1px;
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0;
  }
  .nav {
   background-color: #fff;
   text-align: center;
  }
  .nav .tab {
   width: 100%;
   position: relative;
   overflow: hidden;
  }
  .tab a {
   float: left;
   width: 49%;
   height: 2.56rem;
   line-height:2.56rem;
   display: inline-block;
   border-right: 1px solid #e1e1e1;
  }
  .tab a:last-child {
   border-right: 0;
  }
  .tab .curr {
   border-bottom: 2px solid #fc7831;
   color: #fc7831;
  }
  .content ul li {
   display: none;
   padding: 3%;
   width: 94%;
  }
 </style>
</head>
<body>
<p class="nav">
 <p class="tab border-b">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="curr">商品介绍</a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" >评价(99)</a>
 </p>
 <p class="content">
  <ul>
   <li style="display: block">商品介绍</li>
   <li>评价</li>
  </ul>
 </p>
</p>
</body>
</html>

Copy after login

Have you learned it yet? Hurry up and try it out.

Related recommendations:

Detailed explanation of JavaScript plug-in Tab

##layui tab effect implementation code

jquery implements tab switching effect

The above is the detailed content of How to implement jQuery mobile tab effect. For more information, please follow other related articles on the PHP Chinese website!