Example of jquery price switching with specifications
$(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); }); });
*,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; } }
<! 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>
