Basics-jquery Tab

<div id= "box" class= "box" > <ul class= "tab" > <li class= "" > Da Vinci <span>◇</span></li&        Gt <li class= "" > Peripheral blood <span>◇</span></li> <li class= "" > Huatai <span>◇</span></             li> <li class= "" > Skrie </li> </ul> <div class= "Products" > <div class= "" > <a href= "#" ></a> </div> <div CLA Ss= "" > <a href= "#" ></a> </div> <div class=" "> <a href=" # "><i MG src= "https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1471967865305&di= 4065ba9bd6aa7d2d7d0a8ceb5bcc1ee3&imgtype=jpg&src=http%3a%2f%2fh.hiphotos.baidu.com%2fzhidao%2fpic%            2fitem%2f377adab44aed2e734cbbfa998701a18b87d6fa31.jpg "></a> </div> <div class=" "> <a href= "#" ></a> </div> </div></div>

　　

* {    margin:0;    border:0;    padding:0;} UL {    list-style-type:none;}. box {    width:1002px;    margin:100px Auto;    margin-bottom:0;}. box. tab {    Overflow:hidden;    width:320px;    height:34px;    border:1px solid #ddd;    border-bottom:0;}. box. tab LI {    position:relative;    Float:left;    width:80px;    height:34px;    line-height:34px;    border-top:4px solid #fff;    Text-align:center;    Cursor:pointer;}. box. tab li.selected {    border-color:red;}. Box tab Li span{    position:absolute;    right:0;    top:10px;    Background: #ddd;    width:1px;    height:14px;    Overflow:hidden;}. box. products{    Overflow:hidden;    border:1px solid #ddd;}. box. Products. normal{    float:left;    Display:none;}. box. Products. normal.selected{    Display:block;}. box. Products. normal a{    Display:block;}. box. Products. normal img{    width:1000px;}

　　

$ (function () {    $ ("#box. tab li"). addclass ("normal");    $ ("#box. tab li"). EQ (0). addclass ("selected");    $ ("#box. Products div"). addclass ("normal");    $ ("#box. Products div"). EQ (0). addclass ("selected");    var OBox = $ ("#box"). Get (0);    $ ("#box. tab li"). MouseEnter (function () {        var $This = $ (this);        Obox.index = $This. Index ();        $This. AddClass ("selected"). Siblings ("Li"). Removeclass ("selected");        $ ("#box. Products div"). EQ (obox.index). AddClass ("selected"). Siblings ("div"). Removeclass ("selected");    });

　　

　　

Basics-jquery Tab