一款简单，常用的切换（点击按钮，切换内容）

 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         111111111
15     </div>
16
17     <div class="shop_all_a" style="display:none;">
18         2222222
19     </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>

这是一款简单，易用的切换，使用范围非常广，jquery代码也非常好理解，大家要学会举一反三，直接复制代码，运行后即可看到效果~~~~