JQuery write tab, jquery Tab
<! DOCTYPE html>
<Htmllang = "en">
<Head>
<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>
</Head>
<Body>
<Divid = "box">
<Ulid = "menu">
<Liclass = "active"> first button </li>
<Li> second button </li>
<Li> third button </li>
<Li> fourth button </li>
</Ul>
<Divid = "pannel">
<Divclass = "active"> </div>
<Div> </div>
<Div> </div>
<Div> </div>
</Div>
</Body>
</Html>
Come back and summarize the ideas:
1: CSS layout highlights: The first button and content area are active by default,
2: When writing jQuery, addClass ()/removeClass () is used to change the card status;