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
PHP novice on the road Zblog top articles are only displayed on the home page The Method of Zblog to Realize Automatic Pagination of Long Articles Placeholder for the placeholder text box you just touched Pure CSS perfectly solves the problem of horizontal and vertical centering DIV of pictures Three methods for JQuery to cancel event bubbling