Native JS and jquery write Web page Options Carter effect contrast

Source: Internet
Author: User
Tags jquery library

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.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.