<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
*{margin:0px; padding:0px;}
a{ text-decoration:none; } ul{list-style:none;}
.shop_all{width:300px; height:300px; overflow: hidden;}
.shop_all_a{width:300px; height:300px; background:pink;}
.list_shop{width:1000px; overflow: hidden; margin:auto;}
.list_shop p{width:200px; height:30px; line-height:30px;}
.shop_click{width:500px; overflow: hidden;}
.shop_click li{width:100px; height:40px; border:1px solid red; margin:0px 10px; text-align:center; line-height:40px; float:left; cursor:pointer;}
.red{background:red; color:#fff;}
</style>
</head>
<body>
<ul class="shop_click">
<li class="red">A款</li>
<li>B款</li>
<li>c</li>
</ul>
<div class="shop_all">
<div class="shop_all_a" style="display:block;">
aaaaaa
</div>
<div class="shop_all_a" style="display:none;">
bbbbbb
</div>
<div class="shop_all_a" style="display:none;">
cccccc
</div>
</div>
<script src="jquery.js"></script>
<script>
$('.shop_click li').click(function(){
$(this).addClass('red').siblings().removeClass('red');
//找到“red”类 找到每个div的所有同辈元素 从匹配的元素中删除 'red' 类
$('.shop_all_a').eq($(this).index()).show().siblings().hide();
//获取这个匹配的元素 显示它 同类的元素隐藏//
})
</script>
</body>
</html>