How to realize the effect of Tab Tab on Mobile by jQuery
In this article, the editor introduces in detail "how to achieve mobile Tab tab effect by jQuery". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to achieve mobile Tab tab effect in jQuery" can help you solve your doubts. Let's follow the editor's ideas to learn new knowledge.
Effect picture:
The code is as follows:
Mobile Tab tab $(function () {$(".tab a") .click (function () {$(this) .addClass ('curr'). RemoveClass (' curr'); var index = $(this). Index (); number = index; $('. Nav. Content li'). Hide (); $(. Nav. Content li:eq ('+ index +'). Show ();}) }) * {margin: 0; padding: 0;} div, input, textarea, button, a {- webkit-tap-highlight-color: rgba;} 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:'; position: absolute; left: 0; background: # ddd; right: 0; height: 1px;-webkit-transform: scaleY (0.5); transform: scaleY (0.5);-webkit-transform-origin: 00; transform-origin: 00;} .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% } Commodity introduction and Evaluation (99) Commodity introduction and Evaluation has been read here. The article "how to achieve the effect of Tab tabs on mobile by jQuery" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, welcome to follow the industry information channel.
