产品介绍的切换 js
$(function(){ $(".tab_menu ul li").click(function(){ $(".tab_menu ul li").removeClass("selected"); $(this).addClass("selected"); $(".tab_box div").hide(); var name=$(this).attr("id"); $("#"+name+"_con").show(); }) })html
<div class="tab"> <div class="tab_menu"> <ul> <li id="1" class="selected">产品属性</li> <li id="2">产品尺码表</li> <li id="3">产品介绍</li> </ul> </div> <div class="tab_box"> <div id="1_con"> 沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。延续简约、舒适、健康设计理念，特推出免烫、易打理的精细免烫牛津纺长袖衬衫系列。 </div> <div id="2_con" style="display: none;"> 来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满、朴实无华、温润细腻的经典牛津纺，易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理，立体剪裁，以直筒明门襟的经典造型、配合圆袋、曲摆的现代人性化裁减，相得益彰，浑然天成。色彩明快的纯色衬衫简洁、自然、为您营造出利落、爽朗的形象，透出热情、优雅的个性；精选白、蓝、淡粉、宽条纹、英国格等10余种明亮、经典花型，色彩缤纷呈现，以适合本季着装，更显自然、舒适境界。 </div> <div id="3_con" style="display: none;"> 世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形，缝线部位平服工整、牢固耐磨；人性化的4片式后背打褶结构设计提供更舒适的活动空间；领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现；醇正天然设计，只为彰显自然荣耀。 </div> </div> </div>评分提示 js
$(function(){ $(".rating li").click(function(){ var num=$(this).val(); alert("评分为"+num+"星"); }) })html
<div class="pro_rating"> 给商品评分： <ul class="rating nostar"> <li class="one" value="1"><a href="#" title="1分">1</a></li> <li class="two" value="2"><a href="#" title="2分">2</a></li> <li class="three" value="3"><a href="#" title="3分">3</a></li> <li class="four" value="4"><a href="#" title="4分">4</a></li> <li class="five" value="5"><a href="#" title="5分">5</a></li> </ul> </div>图片的切换 js
$(function(){ $(".imgList img").click(function(){ var img=$(this).attr("src"); var arr=img.split(".jpg"); var newsrc=arr.join("_small.jpg"); console.log(newsrc); $(".jqzoom img").attr("src" ,newsrc); }) })html
<div class="jqzoom"><img src="images/pro_img/blue_one_small.jpg" class="fs" alt="" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/></div> <span> <a href="images/pro_img/blue_one_big.jpg" id="thickImg" title="介绍文字" class="thickbox"> <img alt="点击看大图" src="images/look.gif" /> </a> </span> <ul class="imgList"> <li><img src="images/pro_img/blue_one.jpg" alt="" /></li> <li><img src="images/pro_img/blue_two.jpg" alt="" /></li> <li><img src="images/pro_img/blue_three.jpg" alt="" /></li> </ul>