<!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; 335px;height: 200px;}
#pannel div:nth-of-type(2){background: blue; 335px;height: 200px;}
#pannel div:nth-of-type(3){background: black; 335px;height: 200px;}
#pannel div:nth-of-type(4){background: red; 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>
<div id="box">
<ul id="menu">
<li class="active">第一个按钮</li>
<li>第二个按钮</li>
<li>第三个按钮</li>
<li>第四个按钮</li>
</ul>
<div id="pannel">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
回来再总结下思路吧：
1：CSS布局要点：默认按钮和内容区域第一个为active状态，
2：写jQuery时通过addClass()/removeClass()来改变卡片的状态；