tab (one of the most common page components)

　　

I believe a lot of people have seen the format of various tabs in the Web page, feeling all the same, but for every programmer who writes these tab codes, I believe that each person's thinking and implementation should be different. Even if the idea is the same, the code implementation may be different. Trust the programmer's brother's creative ability.

Not much to say, come up to see the picture () the overall feeling so, for the color of a neat designer door please mercy.

First of all, the dynamic effect, the mouse moved into the head of the Controller section, the following part of the corresponding switch, note that there are two micro-interactive effect, the first head corresponding to the mouse to move the controller color and font color is gradient, this will not appear very blunt, followed by the following part of the content of the switch is left and right to switch The implementation of these two effects are related to CSS3 's transition, here first to understand.

Speaking of these, I can see how the HTML layout.

. html files

<! Doctype html>*{margin:0; padding:0; list-style:none;}. tap{width:800px; height:380px; margin:100px auto border-radius:10px 10px 0 0/10px 10px 0 0; overflow:hidden;}.  control{width:100%; height:80px; background: #CCC; line-height:80px; Text-align:center; font-size:20px; font-family: ' Arial '; border-bottom:1px solid #FFF; z-index:100;}. control li{height:80px; float:left;}. Control li.activ{background: #409CCD; color: #FFF;p osition:relative;-webkit-transition:all 1s ease;-moz-transition: all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}. Control li.activ:before{content: ""; width:0px; height:0px;position:absolute;border-bottom:10px solid #FFF; border-left:10px Solid transparent;border-right:10px Solid transparent;bottom:0px; left:50%;margin-left:-5px;z-index:1000; }.control li.activ:after{content: ""; width:0px; height:0px;position:absolute;border-bottom:10px solid #409CCD; border-left:10px Solid transparent;border-right:10px SoliD Transparent;bottom: -2px; left:50%;margin-left:-5px;z-index:1000; }.warp{width:100%; height:300px; overflow:hidden; position:relative;}. comtent{height:300px; position:absolute; left:0; font-family: "Microsoft Jas Black"; color: #FFF;-webkit-transition:all 0.5s Ease;-mo Z-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s Ease;}. Comtent li{height:300px; Float:left;background: #409CCD;}. img_list{width:100%; height:300px;}. Img_list li{width:25%; height:260px; padding:20px 0; float:left; text-align:center;}. Img_list Li div{width:80%; height:258px; border:1px solid #FFF; margin:0 Auto;}

　　

Because the number of tabs here is not fixed, it can be 5 or 3, so the width of the controller is not given. Because the actual width we have to according to the actual situation JS calculation.

The few lines of code that go directly to the. js file implement the TAB functionality. Of course, you've also seen the introduction of the jquery library.

$ (function () {tab (". Control", ". Comtent");//Call Tab})//tab incoming parameter control component and content component ID or class function tab (control,comtent) {var $li = $ (control+ ">li"); var mun = $li. Length;var width = 1/mun * 100;$ (comtent). css ({width:mun*100 + "%"}), $li. css ({width:w Idth + "%"}), $ (comtent+ "> Li"). CSS ({width:width + "%"}); for (var i =  

All the code is on top, and the details are the implementation of the small sharp angle and the CSS gradient.

In fact, CSS3 function is very powerful, using before and after pseudo-class to achieve small sharp angle,

. Control li.activ:before{
Content: "";
width:0px;
height:0px;
Position:absolute;
border-bottom:10px solid #FFF;
border-left:10px solid Transparent;
border-right:10px solid Transparent;
bottom:0px;
left:50%;
margin-left:-5px;
z-index:1000;
}

Here a sharp corner of the color, and then in the upper cover a small sharp angle after gray to move down 2 px, so that a thin border. This is the only detail.

After this article I would like to talk about my front-end (want to directly see the code can be ignored directly), very difficult, but also very accidental, but ultimately, the interest defeated all problems and difficulties, embarked on such a road. To tell the truth, at this time I still very hesitant, do not know how to go down the road. Although closed focus can write html+css layout and style, but for IE what layout compatible but confused, although can use JS to write the basic interaction of the Web page, but how to object-oriented, how to write high-performance code also do not know, I believe this is probably the most headache for most beginners or the front-end siege of the advanced stage. OK, all work, I have to go, the next part of my front-end road. The programmer brother does not work overtime. Ha ha...

tab (one of the most common page components)