Jquery/js special effect code Summary (1): tab switch, jquery special effect code

Jquery/js special effect code Summary (1): tab switch, jquery special effect code

Jquery implements tab switching:

Html code:

<Ul class = "tabs" id = "tabs01"> <li> <a href = "javascript: void (0) "class =" current "> tab switch 1 </a> </li> <a href =" javascript: void (0) "> tab switch 2 </a> </li> <a href =" javascript: void (0) "> tab Switch 3 </a> </li> </ul> <div class =" container "id =" container01 "> <div class =" con "> display content 1 </div> <div class = "con"> display content 2 </div> <div class = "con"> display content 3 </div>

 

The following code implements the tabs function:

var tabs = function(tab, con){    tab.click(function(){        var indx = tab.index(this);        tab.removeClass('current');        $(this).addClass('current');        con.hide();        con.eq(indx).show();    })    }

 

The code for jquery to call a function is as follows:

$(function(){    tabs($("#tabs01 a"), $('#container01 .con'));  })

Of course, it is more convenient to use this call method.

Of course, js enables tab switching:

First, css public code:

<Style type = "text/css">. wrapper {width: 600px; height: auto; margin: 0 auto;} p {margin: 0; padding: 0; color: #333333; font-family:; font-size: 12px;} ul {margin: 0; padding: 0; list-style-type: none; width: 500px; height: 16px; border-bottom: # DDDDDD solid 1px;} li {margin: 0; padding: 0; height: 16px; padding-left: 5px; padding-right: 10px; float: left; border-left: # FFFFFF solid 1px; border-right: #808080 solid 1px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; background-color: # F4F4F4; cursor: pointer ;}. one {width: 500px; padding-top: 20px; display: none ;}. blue {color: #58A200; background-color: # 8C5C5C ;}. white {color: #000000; background-color: # F4F4F4 ;}</style>

Method 1:

Html code

 <div class="wrapper">    <ul>       <li id="id0" onclick="showTab(0)" class="blue">Javascript</li>       <li id="id1" onclick="showTab(1)">Action Script</li>       <li id="id2" onclick="showTab(2)">Photoshop</li>    </ul>    <div class="one" id="tab0" style="display:block">        <p> </p>    </div>    <div class="one" id="tab1">    <p></p>    </div>    <div class="one" id="tab2">    <p></p>    </div>  </div>

Js Code:

<script type="text/javascript">function showTab(num){for (i=0; i<3; i++){document.getElementById("tab"+i).style.display="none";document.getElementById("id"+i).className="white";}document.getElementById("tab"+num).style.display="block";document.getElementById("id"+num).className="blue";}</script>

Set tab0, tab1, and tab2 to display: none, set the class attribute to white, and set it to display: block Based on the passed parameters, and set the class to blue.

Method 2:

Method 2 HTML code:

<div class="wrapper"><ul>   <li id="id0" onclick="showTab(0,0)" class="blue">Javascript</li>   <li id="id1" onclick="showTab(1,1)">Action Script</li>   <li id="id2" onclick="showTab(2,2)">Photoshop</li></ul><div class="one" id="tab0" style="display:block"><p></p></div><div class="two" id="tab1" style="display:none"><p></p></div><div class="three" id="tab2" style="display:none"><p></p></div></div>

Js Code:

<script type="text/javascript">function showTab(i,j){var x;var y;var l,m;for (l=0; l<3; l++){   x=document.getElementById("id"+l);   if (i==l)   {    x.className="blue";   }   else   {    x.className="white";   }}for (m=0; m<3; m++){   y=document.getElementById("tab" + m);   if (j==m)   {    y.style.display="block";   }   else    {    y.style.display="none";   }}}</script>

Note:This method cannot remove l and m and directly write for (I = 0; I <3; I ++), for (j = 0; j <3; j ++)
Because I was originally a function parameter, its value is passed in outside, if you replace for (l = 0; l <3; l ++) with for (I = 0; I <3; I ++), I will be assigned again, showTab) no matter which value is passed in the brackets, there is no difference.

 

Method 3:

The html code is as follows:

<Div class = "wrap"> <ul id = "tag"> <li class = "current"> tag 1 </li> <li> tag 2 </li> <li> tag 3 </li> </ul> <div id = "tagContent"> <div> content 1 <br> content 1 </div> <div> content 2 <br> content 2 </div> <div> content 3 <br> content 3 </div>

Css code:

*{margin:0;padding:0;} .wrap{width:500px; margin:10px auto; } #tag{ width:498px; overflow:hidden; background:#000; border:1px solid #000; } #tag li{list-style:none; float:left; margin-right:0px; color:white; padding:5px 20px; cursor: pointer;} #tag .current{ color:#000; background:#ccc; } #tagContent div{ width:498px; border:1px solid #000; border-top:none; height:300px; display:none; }

Js Code:

Function tabs (title, content) {var tag = document. getElementById (title ). children; // obtain the li under the Tag, that is, the Tag var content = document. getElementById (content ). children; // obtain the content corresponding to the Tag. content [0]. style. display = "block"; // the content of the first tag var len = tag is displayed by default. length; for (var I = 0; I <len; I ++) // you can achieve the current display no matter who clicks it. The rest are hidden {tag [I]. number = I; tag [I]. onclick = function () // event handle registration for level 0 DOM {for (var n = 0; n <len; n ++) {tag [n]. className = ""; con Tent [n]. style. display = "none";} // first hide all div tags [this. number]. className = "current"; content [this. number]. style. display = "block" ;}}}; tabs ("tag", "tagContent"); // you want to implement a tab switch. // The above uses chidren. You can use childNodes to implement this method, but you need to remove the blank nodes in it. The Code is as follows: function tabs (title, content) {var tag = document. getElementById (title ). childNodes; console. log (tag. length); // The printed result is 7 for (var I = 0; I <tag. length; I ++) {if (tag [I]. nodeType = 3 & amp;/\ s /. test (tag [I]. nodeValue) {tag [I]. parentNode. removeChild (tag [I]) ;}} console. log (tag. length); // The printed result is 3 var content = document. getElementById (content ). childNodes; console. log (content. length); // The print result is 7 for (var I = 0; I <content. length; I ++) {if (content [I]. nodeType = 3 & amp;/\ s /. test (content [I]. nodeValue) {content [I]. parentNode. removeChild (content [I]) ;}} console. log (content. length); // The printed result is 3 content [0]. style. display = "block"; // the content of the first tag var len = tag is displayed by default. length; for (var I = 0; I <len; I ++) // you can achieve the current display no matter who clicks it. The rest are hidden {tag [I]. number = I; tag [I]. onclick = function () // event handle registration for level 0 DOM {for (var n = 0; n <len; n ++) {tag [n]. className = ""; content [n]. style. display = "none";} // first hide all the divs // console. log (this. number); tag [this. number]. className = "current"; content [this. number]. style. display = "block" ;}}}; tabs ("tag", "tagContent ");

 

 

Author: rainbow after the storm

Source: http://www.cnblogs.com/moqiutao/

If you think this article is helpful to your learning, please provide more support and encouragement.