jquery Write tab

<! DOCTYPE html>

lang="en">

>

< Metacharset= "Utf-8" > <title>chosecart </title>

<script src= "https://cdn.bootcss.com/jquery/1.8.3/jquery.js" ></script>

<styleType="Text/css">

*{margin:0;padding:0;}

Li{list-style:none;}

#menu {height:30px;}

#menu li{float:left;background: #999; color: #fff; cursor:pointer;border:2px solid #666;}

#menu. Active{border-right-color: #666; Border-left-color: #666; Border-top-color:blue;border-bottom-color: #fff}

#pannel Div:nth-of-type (1) {background:green;width:335px;height:200px;}

#pannel Div:nth-of-type (2) {background:blue;width:335px;height:200px;}

#pannel Div:nth-of-type (3) {background:black;width:335px;height:200px;}

#pannel Div:nth-of-type (4) {background:red;width:335px;height:200px;}

#pannel Div{display:none;}

#pannel. Active{display:block;}

</style><scripttype="Text/javascript">

$ (function () {

Let oli=$ (' #menu li ');

/*oli.bind (' click ', function () {

Let iindex=$ (This). index (); oli.removeclass (' active '). EQ (iIndex). addclass (' active ');

$ (' #pannel div '). Removeclass (' active '). EQ (iIndex). addclass (' active ');

});*/

Oli.hover (function () {

Let iindex=$ (This). index ();

Oli.removeclass (' active '). EQ (iIndex). addclass (' active ');

$ (' #pannel div '). Removeclass (' active '). EQ (iIndex). addclass (' active ');

})

})

</script>

>

<body>

<divid="box">

<ulid="menu">

<liClass="Active"> First button </li>

<li> Second button </li>

<li> A third button </li>

<li> Fourth button </li>

</ul>

<divid="Pannel">

<divClass="Active"></div>

<div></div>

<div></div>

<div></div>

</div></div>

</body>

>

Come back and summarize the following ideas:

1:css Layout Essentials: Default button and content area The first is the active state,

2: Write jquery by AddClass ()/removeclass () to change the status of the card;

jquery Write tab