search

Home  >  Article  >  Web Front-end  >  How to implement jQuery mobile tab effect

How to implement jQuery mobile tab effect

小云云
小云云Original
2018-01-22 14:02:373087browse

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>

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!

JavaScript jquery layui
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery implements functional examples similar to GridViewNext article：jQuery implements functional examples similar to GridView

Related articles

See more