Native JS and jquery write Web page Options Carter effect contrast
In general, the idea is relatively simple, is to get the node, and then the node for the corresponding processing, the following is the complete page code:
Native JS:
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101-102 | <! DOCTYPE html> <html> <head> <meta charset= "Utf-8" > <meta http-equiv= "x-ua-compatible" content= "Ie=edge,chrome=1" > <title> native js tab</title> <style type= "Text/css" > tab{margin:10px Auto; position:relative; width:300px; ul,li{list-style-type:none; padding:0 margin:0; font:13px/20px simsun,arial; color: #333; text-align:center;}. Tabtltle ul li{float:left position:relative background: #fefefe; background:-webkit-gradient (Linear,left top,left Bottom, from (#fefefe), to (#ededed)); PADDING:7PX 15px; border:1px #ddd Solid; margin-right:-1px; Cursor:pointer; }. Tabtltle ul li.active{background: #fff; font-weight:bold; clearfix{} clearfix:after{Display:block; clear: Both Overflow:hidden; Content: ""; tabconn{border:1px #eee solid; position:relative height:100px} tabconn div{Position:absolute; opacity:0 A (opacity=0); padding:5px; Text-align:center; width:100%; }. Tabconn div.current{opacity:1 Filter:alpha (OPACITY=100); } </style> </head> <body> <div id= "tab" class= "tab" > <div class= "tabtltle" > <ul class= " Clearfix "> <li class=" active "> title one </li> <li> title two </li> <li> title three </li> <li> Title Four </li> </ul> </div> <div class= "Tabconn" > <div class= "Current" >aaaaaaaaaaaaaaa</ Div> <div>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div> <div>cccccccccccccccccccccccccccccccc</ div> <div>ddddddddddddddddddddddddddddd</div> </div> </div> <script type= "text/ JavaScript > (function () {var tab = document.getElementById ("tab"); var tablist = Tab.getelementsbytagname ("div") [0] . getElementsByTagName ("Li"); var tabconn = tab.getelementsbytagname ("div") [1].getelementsbytagname ("div"); for (Var i=0;i<tablist.length;i++) { Tablist[i].index = i; Tablist[i].onclick = function () {showconn (This.index);}} function Showconn (_index) {var index = _index;for (Var j=0;j<tablist.length;j++) {tablist[j].classname = ""; Tabconn[j].classname = ""; tabconn[j].style.opacity=0; } tabconn[index].classname= "Current"; Tablist[index].classname= "Active"; } })(); </script> </body> </html> |
Let's take a look at jquery writing (CSS sharing, need to introduce the jquery library):
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 90 91 92 93 94 95 96-97 | <! DOCTYPE html> <html> <head> <meta charset= "Utf-8" > <meta http-equiv= "x-ua-compatible" content= "Ie=edge,chrome=1" > <title>jquery tab</title> <script type= "Text/javascript" src= "js/" Jquery-1.8.1.min.js "></script> <style type=" Text/css "> tab{margin:10px auto; position:relative; width:300px; ul,li{list-style-type:none; padding:0 margin:0; font:13px/20px simsun,arial; color: #333; text-align:center;}. Tabtltle ul li{float:left position:relative background: #fefefe; background:-webkit-gradient (Linear,left top,left Bottom, from (#fefefe), to (#ededed)); PADDING:7PX 15px; border:1px #ddd Solid; margin-right:-1px; Cursor:pointer; }. Tabtltle ul li.active{background: #fff; font-weight:bold; clearfix{} clearfix:after{Display:block; clear: Both Overflow:hidden; Content: ""; tabconn{border:1px #eee solid; position:relative height:100px} tabconn div{Position:absolute; opacity:0 A (opacity=0); Padding5px; Text-align:center; width:100%; }. Tabconn div.current{opacity:1 Filter:alpha (opacity=100);} </style> </head> <body> <h3> jquery-Written tab:</h3> <div id= "tab2" class= "tab" > <div class= "tabtltle tab-title" > <ul class= " Clearfix "> <li class=" active "> title one </li> <li> title two </li> <li> title three </li> <li> Title Four </li> </ul> </div> <div class= "Tabconn tab-conn" > <div class= "Current" > Aaaaaaaaaaaaaaa</div> <div>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div> <div> Cccccccccccccccccccccccccccccccc</div> <div>ddddddddddddddddddddddddddddd</div> </div> </div> <script type= "Text/javascript" > $ (document). Ready (function () {var $tabTitle = $ ('. Tab-title '). Find (' Li '); var $tabList = $ ('. Tab-conn > div '); $tabTitle. Click (function () {$tabTitle. each (function () {$tabTitle. Removeclass (' active ');}); var index = $ Tabtitle.index (this); $ (this). addclass (' ActivE '); $tabList. EQ (index). addclass ("current"). Siblings (). Removeclass (' current '); }); }); </script> </body> </html> |
is not a lot simpler!
The above mentioned is the entire content of this article, I hope you can enjoy.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
