jquery Summary 7

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">{margin:0px;padding:0px;} Body{font-size:12px;}        . box{margin:10px;padding:10px;} . Box h3{margin:10px 0px;border-BOTTOM:1PX Solid red;padding-bottom:10px;} . Box P{line-height:20px;}        . tabbox{margin:10px;} . Tabbox. tabhead{float: left;list-style:none;margin-right:-1px;} . Tabbox. Tabhead Li{width:80px;height:30px;cursor:pointer;line-height:30px;padding:0px 5px;border:1px solid #aaccff; margin-bottom:-1px;border-right:0px;} . Tabbox. Tabhead Li.selected{background-color: #aaccff; color:white;font-Weight:bold;} . Tabbox. tabcontent{float: left;border:1px solid #aaccff;p adding:10px;min-height:200px;width:600px;background-color: #aaccff;} . Tabbox. tabcontent Div{display:none;line-height:20px;}            . tabbox. Tabcontent Div.selected{display:block;} </style> <script type= "Text/javascript" >$ (function () {$ (". Tabhead Li"). Click (function () {$ (". Tabhead li"). Removeclass ("Selected"); $( This). AddClass ("Selected"); var index= $ (". Tabhead li"). Index ($ ( This)); $(". Tabcontent>div"). Removeclass ("selected")); $(". Tabcontent>div"). EQ (index). addclass ("Selected");        });    }); </script>class= "box" > complete tab switching, where HTML and CSS are given, just write the corresponding JS code to</p> </div> <divclass= "Tabbox" > <ulclass= "Tabhead" > <liclass= "Selected" > tab one </li> <li> tab two </li> <li> tab three </li> <li > Tabs four </li> </ul> <divclass= "Tabcontent" > <divclass= "Selected" > Content one </div> <div> content two </div> <div> content three </div> < Div> content four </div> </div> </div></body>
jquery Summary 7