Home > Article > Web Front-end > Two jQuery ways to implement tab functionality

Two jQuery ways to implement tab functionality

小云云Original: 2018-01-23 10:30:532153browse

There are many ways to implement tabs, but they remain the same and the idea is very important. This article mainly introduces examples of two methods of writing tabs in jQuery, which has a 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>
 <head>
 <meta charset="UTF-8">
 <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
 <title>JQuery 源码分析</title>
 <style>
 #p1 p{width: 200px;height: 200px;border: 1px solid #FF0000;display: none;}
 .active{background: red;}
 *{margin: 0;padding: 0;}
 .tab:after{content: &#39;&#39;;display: block;clear: both;}
 .tab li{width: 150px;height: 30px;line-height: 30px;text-align: center;cursor: pointer;list-style: none;float: left;margin: 0 10px;background: #ABCDEF;border-radius: 5px;}
 .tab li.active{background: #000;color:#fff;}
 .content:after{content: &#39;&#39;;display: block;clear: both;}
 .content li{width: 460px;height: 300px;padding:20px;background: #f7f7f7;display: none;}
 </style>
 </head>
 <body>
 <p id="p1">
 <input class="active" type="button" value="1" />
 <input type="button" value="2"/>
 <input type="button" value="3"/>
 <p style="display: block;">11111111111</p>
 <p>22222222222</p>
 <p>333333333333</p>
 </p>
 <ul class="tab">
 <li class="active">1</li>
 <li>2</li>
 <li>3</li>
 </ul>
 <ul class="content">
 <li style="display: block;">111111111111</li>
 <li>222222222222</li>
 <li>333333333333</li>
 </ul>
 <script>
 $(function(){
 //jQuery 方法一
 $(&#39;#p1&#39;).find(&#39;input&#39;).click(function(){
 $(&#39;#p1&#39;).find(&#39;input&#39;).attr(&#39;class&#39;,&#39;&#39;);
 $(&#39;#p1&#39;).find(&#39;p&#39;).css(&#39;display&#39;,&#39;none&#39;)
 $(this).attr(&#39;class&#39;,&#39;active&#39;);
 $(&#39;#p1&#39;).find(&#39;p&#39;).eq($(this).index()).css(&#39;display&#39;,&#39;block&#39;);
 });
 //jQuery 方法二
 $(&#39;.tab&#39;).find(&#39;li&#39;).click(function(){
 var index = $(this).index();
 $(this).addClass(&#39;active&#39;).siblings().removeClass(&#39;active&#39;);
 $(&#39;.content&#39;).find(&#39;li&#39;).eq(index).show().siblings().hide();
 })
 })
 </script>
 </body>
</html>

Related recommendations:

jQuery mobile Tab tab effect implementation method

JavaScript plug-in Tab tab detailed explanation

jquery implements tab switching effect

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

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：JS implements jQuery’s animate() animationNext article：JS implements jQuery’s animate() animation

See more

Two jQuery ways to implement tab functionality

Related articles