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

<div class="list_shop">
       <p>保障期限 1年</p>
    <ul class="shop_click">
           <li class="red">A款</li>
           <li>B款</li>
       </ul>

       <p><a href="">立即购买</a></p>

</div>

<div class="shop_all">
    <div class="shop_all_a" style="display:block;">
 111111111 15     </div>

    <div class="shop_all_a" style="display:none;">
 2222222 19     </div>
</div>

 

<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>

 

<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代码也非常好理解，大家要学会举一反三，直接复制代码，运行后即可看到效果~~~~