jquery tab Toggle

Html

<! DOCTYPE html>
Css
* {padding:0; margin:0;} body {font-size:12px; padding:100px;} UL {List-style-type:none;}. Box ul {height:30px; line-height:30px;}. Box ul li {float:left; padding:0 10px; position:relative; Cursor:pointer; border:1px solid #000; margin-right:5px; Border-bottom:none;}. Box ul li.two {background: #eee;}. content {width:325px; border:1px solid #000; padding:10px; height:100px;} * HTML. Content {margin-top:-1px;}//Browser compatible Ie6.box ul li.one {background-color:black;color:white;}
Js
$ (document). Ready (function () {$ ('. CT:GT (0) '). Hide ();   The hidden GT with content greater than 0    (0) is greater than 0var BT = $ ('. Box ul Li '); Bt.hover (function () {$ (this). addclass ('). Siblings (). Removeclass ( ' both ');   The current element adds a class sibling element to remove class});       Bt.click (function () {$ (this). addclass (' one '). Siblings (). Removeclass ();//link the index of the title to the content index var content_index = Bt.index (this);
       Content switch $ ('. Ct '). EQ (Bt.index (this)). Show (). siblings (). Hide ();});
Effect:
09:52:18 2017-09-24
jquery tab Toggle