It is important to note that jQuery and CSS work together to create a tab.

Today, I encountered a problem when writing a tab effect. I am confused for a moment. I have written many times in the same effect before, but this problem does not occur. At the beginning, the monk was a little confused. He didn't know what was going on, and he muttered in his mind that there was never a bug here ???

Problem description and analysis: When you switch the tab, the "hover" effect will also appear when you move the cursor over the class attribute "selected. Under normal circumstances, the selected phase will not have the effect of passing through the mouse, and only the unselected phase will have the effect of passing through the mouse. When this problem occurs, I first read the jq code and find that there is no problem, and there is no problem at all. After half a day, I thought, is there a problem with my CSS. Think of this, it is the key. The problem is true. In fact, there are "hover" events in both the selected and unselected items, just to see which style they represent. At this time, we should make ". the selected style is written in ". hover "is behind the style, because in CSS, the priority relationship, the latter write takes precedence over the first write, if the selector level is the same.

Code rendering:

Div:

<Div class = "tab"> <div class = "tab_menu"> <ul> <li class = "selected"> product attributes </li> <li> product size table </ li> <li> product introduction </li> </ul> </div> <div class = "tab_box"> <div> uses the popular-year-old classic cotton Oxford fabric, through the advanced Liquid Ammonia finishing technology, the anti-wrinkle performance of the fabric is upgraded to a layer. Continued simple, comfortable, healthy design concept, Special Release free hot, easy to take care of the fine free hot Oxford spinning long sleeve shirt series. </Div> <div class = "hide"> eco-cotton from Xinjiang, which is non-polluting, adopts compact combed cotton yarns and is single-warp and double-weft woven, makes the classic Oxford spinning full of particles, simple, gentle and delicate, easy to wash fast dry, feel rich soft, good moisture absorption. Designers follow the perfect fabric texture, three-dimensional tailoring, and modern and humanized cutting of the curved pendulum. </Div> <div class = "hide"> the lining of the world's authoritative German codebao and the British codesoft line make the collar type stretch naturally and never deform, and the stitching parts are neatly and firmly worn; the Humanized 4-piece back folding structure design provides a more comfortable activity space; the collar with a tip buckle is designed to wear the same style as or without a tie, instantly presented; mellow and natural design, only to show the glory of nature. </Div>

JQ:

var $div_li=$(".tab_menu ul li");    $div_li.click(function(){        $(this).addClass("selected")            .siblings().removeClass("selected");        var index=$div_li.index(this);        $(".tab_box div").eq(index).show()            .siblings().hide();    }).hover(function(){        $(this).addClass("hover");    },function(){        $(this).removeClass("hover");    });

CSS:

.tab_menu ul li{    float:left;    width:auto;    margin-right:4px;    border:1px solid #898989;    border-bottom:none;    padding:1px 6px;    background:#f1f1f1;    cursor:pointer;}.tab_menu ul li.hover{    background:#dfdfdf;}.tab_menu ul li.selected{    color:#fff;    background:#6D84B4;}