1 <div class="list_shop"> 2        <p>保障期限 1年</p> 3     <ul class="shop_click"> 4            <li class="red">A款</li> 5            <li>B款</li> 6        </ul> 7  8        <p><a href="">立即购买</a></p> 9 10 </div>11 12 <div class="shop_all">13     <div class="shop_all_a" style="display:block;">14         11111111115     </div>16 17     <div class="shop_all_a" style="display:none;">18         222222219     </div>20 </div>

 1 <style type="text/css"> 2  *{margin:0px; padding:0px;} 3   a{ text-decoration:none; }  ul{list-style:none;} 4  .shop_all{width:300px; height:300px; overflow: hidden;} 5  .shop_all_a{width:300px; height:300px; background:pink;} 6  .list_shop{width:1000px; overflow: hidden; margin:auto;} 7  .list_shop p{width:200px; height:30px; line-height:30px;} 8  .shop_click{width:500px; overflow: hidden;} 9  .shop_click li{width:100px; height:40px; border:1px solid red; margin:0px 10px; text-align:center; line-height:40px; float:left; cursor:pointer;}10 .red{background:red; color:#fff;}11 </style>

<script>    $(function(){        $(‘.shop_click li‘).click(function(){           $(this).addClass(‘red‘).siblings().removeClass(‘red‘)//找到“red”类  找到每个div的所有同辈元素  从匹配的元素中删除 ‘red‘ 类//           $(‘.shop_all_a‘).eq($(this).index()).show().siblings().hide(); //获取这个匹配的元素 显示它  同类的元素隐藏//       })    })</script>