作业要求：
参考下图，点击展示不同内容。
例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .header{ background-color: whitesmoke; width: 100%; height: 50px; border-bottom: 2px solid red; position: relative; } .action { height: 50px; color: #696969; font-size: 22px; font-weight: 200; line-height: 50px; padding: 1px 30px 1px 30px; } .shopping_car a{ text-decoration: none; height: 50px; color: white; font-size: 13px; font-weight: 200; padding: 0px 15px 0 15px; background-color: #ee0f23; line-height: 50px; position: absolute; left:1500px; top:0px; } .img_cont img{ margin-top: 52px; } .a1 { position: absolute; left:0; top:0; } .a2{ position: absolute; left:150px; top:0; } .a3{ position: absolute; left:300px; top:0; } .a4{ position: absolute; left:450px; top:0; } .a5{ position: absolute; left:680px; top:0; } .hide{ display: none; } .change { background-color: #ee0f23; color: #F5F5F5; } </style> </head> <body> <script src="jquery-3.2.1.min.js"></script> <div class="header"> <div class="item"> <div class="action a1">商品介绍</div> <div class="img_cont hide"> <img src="商品介绍.jpg" alt=""> </div> </div> <div class="item"> <div class="action a2">规格与包装</div> <div class="img_cont hide"> <img src="规格包装.jpg" alt=""> </div> </div> <div class="item"> <div class="action a3">售后保障</div> <div class="img_cont hide"> <img src="售后保障.jpg" alt=""> </div> </div> <div class="item"> <div class="action a4">商品评价(3.8万+)</div> <div class="img_cont hide"> <img src="商品评价.jpg" alt=""> </div> </div> <div class="item"> <div class="action a5">社区互动</div> <div class="img_cont hide"> <img src="社区互动.jpg" alt=""> </div> </div> <span class="shopping_car"> <a href="">加入购物车</a> </span> </div> <script> $(".action ").click(function () { $(this).addClass("change"); $(this).next().removeClass("hide"); $(this).parent().siblings().children(".action").removeClass("change"); $(this).parent().siblings().children(".img_cont").addClass("hide"); }) </script> </body> </html>
作业要求：
表格的编辑，添加和删除功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./css/bootstrap.css"> <style> *{ margin:0; } .shade1{ position: fixed; top:0; left:0; right:0; bottom:0; background-color: gray; opacity: 0.6; } .model1{ position: fixed; left:300px; top:100px; width: 600px; height: 300px; background-color: white; } .hide1{ display: none; } </style> </head> <body> <button class="btn-primary btn-lg">添加</button> <div class="container"> <div class="row"> <div class="col-md-10"> <table class="table table-bordered table-hover"> <thead> <tr class="info"> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>班级</th> <th>操作</th> </tr> </thead> <tbody id="bb1"> <tr> <td>Tom</td> <td>18</td> <td>男</td> <td>101</td> <td><button class="btn-danger">删除</button> <button class="btn-success">编辑</button></td> </tr> <tr> <td>Jack</td> <td>19</td> <td>男</td> <td>102</td> <td><button class="btn-danger">删除</button> <button class="btn-success">编辑</button></td> </tr> <tr> <td>Jerry</td> <td>20</td> <td>女</td> <td>103</td> <td><button class="btn-danger">删除</button> <button class="btn-success">编辑</button></td> </tr> </tbody> </table> </div> </div> </div> <div class="shade1 hide1"></div> <div class="model1 hide1"> <h3 class="text-center">添加学生信息</h3> <form action="" class="form-horizontal"> <div class="form-group"> <label class="col-sm-3 control-label">姓名</label> <div class="col-sm-6"> <input class="col-sm-2 form-control item" type="text" > </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">年龄</label> <div class="col-sm-6"> <input class="col-sm-2 form-control item" type="text" > </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">性别</label> <div class="col-sm-6"> <input class="col-sm-2 form-control item" type="text" > </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">班级</label> <div class="col-sm-6"> <input class="col-sm-2 form-control item" type="text" > </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input type="button" class="btn btn-default" id="subBtn" value="submit"> </div> </div> </form> </div> <script src="jquery-3.1.1.js"></script> <script> // 删除及委派 $("#bb1").on("click",".btn-danger",function(){ $(this).parent().parent().remove() }) //添加 $(".btn-primary").click(function(){ $(".shade1").show(); $(".model1").show(); }) $("#subBtn").click(function(){ // 关闭对话框 $(".shade1").hide(); $(".model1").hide(); // 获取用户输入值 var arr=[]; $(".item").each(function(){ arr.push($(this).val()); }); // 构建tr标签 var s='<tr><td>'+arr[0]+'</td><td>'+arr[1]+'</td><td>'+arr[2]+'</td><td>'+arr[3]+'</td><td><button ' + 'class="btn-danger">删除</button> <button class="btn-success">编辑</button></td></tr>' $("#bb1").append(s) }) // 编辑及委派 // $("#bb1").on("click",".btn-success",function(){ // $(this). // }) </script> </body> </html>