作业要求:
参考下图,点击展示不同内容。
例:
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<!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> <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>
作业要求:
表格的编辑,添加和删除功能
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<!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>
例如
<!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>