JQuery web page Tab

Let's take a look

The above results are actually very simple, and the Code does not need much, as long as you have jQuery and css layout.

Select.html

<! DOCTYPE html> 

Select.css


@CHARSET "UTF-8";* {padding: 0px;margin: 0px;}ul,li {list-style-type: none;}#menu li {text-align: center;float: left;padding: 5px;margin-right: 2px;width: 50px;cursor: pointer;}#menu li.tabFocus {width: 50px;font-weight: bold;background: #f3f2e7;border: #666 1px solid;border-bottom: 0px;z-index: 100;position: relative;}#content {width: 260px;height: 80px;padding: 10px;background: #f3f2e7;border: #666 1px solid;position: relative;clear:left;top: -1px;}#content li {display: none;}#content li.conFocus{display: block;}

Select. js


$ (Function () {$ ("# menu li "). each (function (index) {$ (this ). mouseover (function () {// bind a click event $ ("# menu li") for each main menu "). removeClass ("tabFocus"); $ (this ). addClass ("tabFocus"); // these two lines of code implement a free style $ ("# content li: eq (" + index + ")"). show (300 ). siblings (). hide (); // siblings () Obtain peer element });});});

Note: To achieve the fusion effect, you need to set two points. One is to remove the bottom border of the main tab, and the other is to set the sub-content to a relative layout and a height-1 px