Example of jquery price switching with specifications

web front end four thousand five hundred and three Six years ago (2017-03-31)

Nowadays, when we browse the product page of e-commerce websites, we often see product specifications and price displays. Different specifications correspond to different prices, such as the hot sale of our website theme On the page, click the specification to display the corresponding price. The implementation method is very simple, so I wrote a Responsive To show that prices switch with specifications.

Effect preview:

Jquery code:

 $(function(){ $(".proname a:first-child").addClass("on"); $(".proname a").click(function(){ $(this).addClass("on").siblings().removeClass("on"); $dataprice = $(this).attr("data-price"); $(this).parent().next().children("span").text($dataprice); return false; }); $(".proprice").each(function(){ $firstattr = $(this).prev().find("a:first").attr("data-price"); $(this).find("span").text($firstattr); }); });

CSS code:

 *,body { margin:0; padding:0; } body { font-size:14px; color:#333; font-family:arial,"microsoft yahei"; } ul { list-style:none; } a { color:#004c98; text-decoration:none; } .protitle { width:1018px; margin:100px auto 20px; padding-bottom:10px; font:24px/38px "microsoft yahei"; text-align:center; } .protitle p { font:12px/18px "microsoft yahei"; color:#999; text-transform:uppercase; } .pro { width:1018px; margin:0 auto; padding:22px 0; border:1px solid #ebebeb; box-shadow:0 0 1px 0 rgba(0,0,0,.1); background:#fff; overflow:hidden; } .pro ul li { width:270px; float:left; margin-left:22px; padding:20px; background:#f8f8f8; } .pro li p { line-height:30px; } .proname { margin-bottom:20px; } .proname a { margin:0 5px 5px 0; padding:0 20px; line-height:24px; border:1px solid #004c98; display:inline-block; } .proname a.on { color:#fff; border-color:#004c98; background:#004c98; } .proprice { color:#333; line-height:30px; border-top:1px solid #ddd; } .proprice span { color:#333; font-weight:600; } .copyright { width:1018px; margin:50px auto 0; padding-top:10px; font-size:12px; color:#666; text-align:center; line-height:18px; border-top:1px solid #ebebeb; } @media screen and (max-width:1020px) { .protitle { width:auto; margin:50px auto 20px; } .pro { width:auto; margin:0 10px; padding:20px; } .pro ul li { width:100%; margin:0; margin-bottom:22px; box-sizing:border-box; } .copyright { width:auto; margin:50px 10px 0; } }

HTML code:

 <! DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Example of price switching with specifications- Tuoyuan Network </title> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <script type="text/javascript" src=" https://apps.bdimg.com/libs/jquery/1.8.3/jquery.js "></script> </head> <body> <div>Example of price switching with specifications - Tuoyuan<p>Code in www.toyean. com</p></div> <div> <ul> <li> <p>Specifications:</p> <div> <a href="" data-price="99">PHP</a> <a href="" data-price="100"> ASP .NET</a> </div> <div> Amount payable: ¥<span>0</span> </div> </li> <li> <p>Specifications:</p> <div> <a href="" data-price="109">ASP</a> <a href="" data-price="110">JSP</a> <a href="" data-price="59">HTML</a> </div> <div> Amount payable: ¥<span>0</span> </div> </li> <li> <p>Specifications:</p> <div> <a href="" data-price="15">MYSQL</a> <a href="" data-price="25">DB2</a> <a href="" data-price="85">Oracle</a> </div> <div> Amount payable: ¥<span>0</span> </div> </li> </ul> </div> <div>COPYRIGHT  ©  2010-2017 <a href=" https://www.toyean.com/ " target="_ Blank ">TOYEAN. COM</a>. ALL RIGHTS RESERVED. Jing ICP Bei No. 11003065</div> </body> </html>