一款簡單，常用的切換（點擊按鈕，切換內容）

<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代碼也非常好理解，大家要學會舉一反三，直接復制代碼，運行后即可看到效果~~~~