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>
Related articles
The display: block of tr in the table is displayed incorrectly in Firefox Tutorial on using commodity template code of Tuoyuan JD store Sort out common codes of Tmall JD Dangdang stores Solution to font size: 0 failure in IE6/7 Effect of JQuery floating sidebar on e-commerce website CSS implementation of modifying the color and background color of the selected text on the web page