Two jQuery ways to implement tab functionality-JS Tutorial-php.cn

Two jQuery ways to implement tab functionality

小云云

Release： 2018-01-23 10:30:53

Original

2187 people have browsed it

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>

Copy after login

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!