文字切换，尺寸显示，数量总计

点击使文字切换

<div class="tab_menu">
       <ul>
        <li class="selected">产品属性</li>
        <li>产品尺码表</li>
        <li>产品介绍</li>
       </ul>
      </div>
      <div class="tab_box">
       <div>沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。延续简约、舒适、健康设计理念，特推出免烫、易打理的精细免烫牛津纺长袖衬衫系列。
       </div>
       <div class="hide">
        来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满、朴实无华、温润细腻的经典牛津纺，易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理，立体剪裁，以直筒明门襟的经典造型、配合圆袋、曲摆的现代人性化裁减，相得益彰，浑然天成。色彩明快的纯色衬衫简洁、自然、为您营造出利落、爽朗的形象，透出热情、优雅的个性；精选白、蓝、淡粉、宽条纹、英国格等10余种明亮、经典花型，色彩缤纷呈现，以适合本季着装，更显自然、舒适境界。
       </div>
       <div class="hide">
        世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形，缝线部位平服工整、牢固耐磨；人性化的4片式后背打褶结构设计提供更舒适的活动空间；领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现；醇正天然设计，只为彰显自然荣耀。
       </div>
      </div>
     </div>

jquery里：

$(function() {
    $(".tab_menu li").click(function() {
     $(this).addClass("selected").siblings().removeClass("selected");
     var cname = $(this).index();
     if (cname == "0") {
      $(".tab_box div:eq(0)").removeClass("hide").siblings().addClass("hide");
     }
     if (cname == "1") {
      $(".tab_box div:eq(1)").removeClass("hide").siblings().addClass("hide");
     }
     if (cname == "2") {
      $(".tab_box div:eq(2)").removeClass("hide").siblings().addClass("hide");
     }
    })
   })

效果图：

尺寸选择：

<div class="pro_size">
      尺寸：<strong>未选择</strong>
      <ul>
       <li><span>S</span></li>
       <li><span>L</span></li>
       <li><span>SL</span></li>
       <li><span>LL</span></li>
      </ul>
     </div>

jQuery里：

$(window).load(function() {
    $(".pro_size li").bind("click onmouseout", function() {
     var size = $(this).index();
     if (size == "0") {
      $(".pro_size strong").text("S");
     }
     if (size == "1") {
      $(".pro_size strong").text("L");
     }
     if (size == "2") {
      $(".pro_size strong").text("SL");
     }
     if (size == "3") {
      $(".pro_size strong").text("LL");
     }
    });
   })

效果图：

数量总计：

<div class="pro_num">
      数量：
      <select id="num_sort" style="width:40px;">
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
       <option value="5">5</option>
      </select>
     </div>
     <div class="pro_price">
      总计：<span>200</span>元
     </div>

jQuery：

$(function() {
    var $span = $(".pro_price span");
    var div_price = $span.text();
    $("#num_sort").change(function() {
     var num = $(this).val();
     var amount = num * div_price;
     $span.text(amount);
    }).change();
   })

效果图：