jquery实现职位发布选择套餐购买页面效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery实现职位发布选择套餐购买页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <style> body { width: 100%; margin: 0; padding: 0; font-size: 12px; font-family: Arial, Helvetica, "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; background: #f3f3f3; color: #333; } span, p, ul, li, input { margin: 0; padding: 0; font-weight: normal } i { font-style: normal; } ul, li { list-style: none; } a { text-decoration: none; color: #333; transition: background-color 0.2s ease 0s, color 0.2s linear 0s; } a:link, a:visited, a:active { color: #999; text-decoration: none } a:hover { color: #28a6db } input { outline: 0; border: none; background: #FFF; } .ml20 { margin-left: 20px; } .w_1200 { width: 1200px; margin: 0 auto; } a.ty_but { width: 130px; height: 40px; line-height: 40px; text-align: center; display: block; font-size: 16px; color: #fff; border-radius: 3px; background: #169ed8; } a.ty_but:hover { background: #1187ba; } /*右边*/ .fw_conent { padding: 30px 35px; line-height: 28px; font-size: 14px; color: #666; background: #FFF; min-height: 600px; } .bzzx_bt { font-size: 12px; color: #999; margin-bottom: 20px; } .bzzx_bt strong { color: #333; font-size: 20px; font-weight: 400; border-bottom: 2px solid #169ed8; padding-bottom: 15px; display: inline-block; margin-right: 20px; } .bzzx_bt span { color: #169ed8; } .zwfb_shop_table { margin-left: 100px; margin-top: 50px; } .fwmc_xxk { overflow: hidden; width: 650px; margin-left: 20px; } .fwmc_xxk li { float: left; width: 150px; height: 52px; border: 1px solid #ddd; font-size: 18px; color: #666; margin-right: 30px; text-align: center; margin-bottom: 25px; overflow: hidden; cursor: pointer; } .fwmc_xxk li p { line-height: 18px; font-size: 12px; color: #999; margin-top: 5px; } .fwmc_xxk li.on { background: url(//repo.bfw.wiki/bfwrepo/icon/5e0eaff3ae5a4.gif) no-repeat bottom right; color: #169ed8; border: 1px solid #169ed8; } .fwmc_xxk li.on p { color: #169ed8; } .nmb_jj { overflow: hidden; margin-left: 20px; } .nmb_jj li { float: left; text-align: center; line-height: 30px; border: 1px solid #ddd; font-size: 20px; padding: 0 8px; } .nmb_jj li.jia { border-left: none; cursor: pointer; color: #999; width: 30px; padding: 0; } .nmb_jj li.jian { border-right: none; cursor: pointer; color: #999; width: 30px; padding: 0; } .nmb_jj li .srkk { width: 30px; font-size: 16px; border: none; line-height: 24px; text-align: center; } .zwfb_zje { margin-left: 20px; font-size: 20px; color: #169ed8; } .zwfb_zje i { font-size: 14px; padding-left: 5px; font-style: normal; } .gmxz_tip { margin-top: 80px; margin-left: 100px; font-size: 14px; color: #333; } .gmxz_tip p { font-size: 12px; color: #999; line-height: 24px; } .zwsl_num { margin-left: 20px; font-size: 16px; color: #333; } .zwsl_num span { color: #999; font-size: 12px; padding-left: 10px; } </style> <!--js区域--> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) { $(".fwmc_xxk li").click(function() { //var fw_price = $(this).children("i").text(); //var fw_numb = $(".srkk").val(); //var fw_tal = fw_price*fw_numb; //$(".zwfb_zje span").text(fw_tal); $(this).addClass("on").siblings().removeClass("on"); tola(); }); //加 $(".jia").click(function() { var fw_numb = $(".srkk").val(); fw_numb++; $(".srkk").val(fw_numb); /*$(".........完整代码请登录后点击上方下载按钮下载查看
网友评论0