"Little Demo" left and Right button tab tab double switch instance code

Through the previous article from the Simple tab tab to the tab image switch instructions, the relevant effect can be achieved.

1. The Left and Right Buttons tab tab double switch

Obviously, the left and right two buttons are absolute layouts, the other is the Content Section and Tab tab section.

1) First realize the tab content and the label part of the display:

HTML code:

<div class= "Tab-infomations" > <div class= "arrows" ></div> <div class= "Tab-content" > &L T;div class= "Tab-info" > <div class= "info info1" > <p> We provid e a full spectrum of online advertising ... <br/> <a href= "#" class= "Global            Button "><span>tour our services</span></a> </p> </div>            <div class= "info info2 hidden" >...</div> <div class= "info info3 hidden" ... </div>            <div class= "info Info4 hidden" ... </div> </div> <div class= "Tab-thumbs" > <ul> <li class= "selected" ><a href= "javascript:;" >what We do</a></li> <li><a href= "javascript:;" >who We are</a></li> <li><a href= "javascript:;" >why Choose us</a></li> <li><a href= "javascript:;" >how We work</a></li> </ul> </div> </div></div>

CSS code:

Body, UL, Li {margin:0; padding:0;} Body, button, input, select, textarea {font:12px/1.5 tahoma, arial, \5b8b\4f53;} UL, Ol,li {list-style:none;} a {text-decoration:none;}. hidden {display:none;} /*----------tab------------*/.tab-infomations {position:relative;width:959px;margin:10px auto;}. tab-content {Width:912px;height:324px;background:url ("..   /imgs/tab-for-infomation/slidebg.jpg ") No-repeat; overflow:hidden;margin:0 Auto;} /*----------tab-thumbs------------*/.tab-thumbs{position:absolute;bottom:0;}. Tab-thumbs li {float:left;width:228px;height:50px;}. Tab-thumbs Li a {width:228px;height:50px;display:block;color: #ffffff; font-size:18px;font-family:arial,sans-serif; Line-height:50px;text-align:center; }.tab-thumbs li.selected a{cursor:default;text-shadow:1px 1px 1px #374f10;} /*----------Tab-info------------*/.tab-info {width:912px;height:324px;}. info {width:912px;height:324px;position:absolute;}. Info p{color: #1d1d1d; font-size:12px;line-height:20px;margin-left:326px;margin-top:142px;width:542px; }.info1 {Background:url (".. /imgs/tab-for-infomation/billboard1.png ") No-repeat; }.info2 {Background:url (".. /imgs/tab-for-infomation/billboard2.png ") No-repeat; }.info3 {Background:url (".. /imgs/tab-for-infomation/billboard3.png ") No-repeat; }.info4 {Background:url (".. /imgs/tab-for-infomation/billboard4.png ") No-repeat; }. Globalbutton {Background:url (".. /imgs/tab-for-infomation/btn_right.png ") no-repeat top right;display:block;float:left;font-weight:bold;height: 31px;margin-top:20px;padding-right:20px;}. Globalbutton span {background:transparent URL (".. /imgs/tab-for-infomation/btn_left.png ") No-repeat 0 0;line-height:18px;line-height:18px;padding:7px 0 6px 20px;color : #252525;d Isplay:block;} /*----------Tab-info------------*/.arrows {position:absolute;}

Effect:

2) Then we add the buttons on both sides

Here's a little tweaking of the HTML:

<div class= "Tab-infomations" >    <div class= "arrows" >        <a class= "Arrows-left prev" ></a >        <a class= "arrows-right Next" ></a>    </div>    <div class= "Tab-border" >        <div class= "Tab-content" > ...        </div>    </div></div>

Then the CSS code:

. tab-border {border:1px solid #cccccc; margin:0 auto;padding:3px;width:912px;} /*----------   tab-arrows------------*/.arrows a {display:block;height:41px;width:41px;top:143px;z-index:10; Position:absolute;cursor:pointer;}. Arrows-left {Background:url (".. /imgs/tab-for-infomation/arrows.png ") no-repeat  0 0;left:0;}. arrows-right {Background:url (".. /imgs/tab-for-infomation/arrows.png ") no-repeat  -41px 0px;right:0;}. Arrows-left:hover,.arrows-right:hover {background-position-y: -41px;}

The display results are as follows:

3) then add the jquery method

$ (document). Ready (function () {    var mindex = 0;    var Maxindex = $ (". Tab-thumbs li"). Length-1;    $ (". Tab-thumbs li"). Click (function () {        var Mindex = $ (this). index ();        Changetab (Mindex);    });    $ (". Arrows-right"). Click (function () {        if (mindex<maxindex) {            mindex++;        } else {            Mindex = 0;        }        Changetab (Mindex);    });    $ (". Arrows-left"). Click (function () {        if (mindex>0) {            mindex--;        } else {            mindex = Maxindex;        }        Changetab (Mindex);    }) function Changetab (theindex) {    $ (". Tab-thumbs li"). Removeclass ("selected");    $ (". Tab-thumbs li"). EQ (theindex). AddClass ("selected")    $ (". Info"). Stop ();    $ (". Info"). FadeOut ();    $ (". Info"). EQ (theindex). FadeIn ();}