一.Tab选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
position: relative;
}
li {
list-style: none;
}
ul {
width: 750px;
height: 50px;
background-color: #ddd;
margin: 50px auto;
}
ul li {
float: left;
height: 50px;
width: 150px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
.current {
background-color: red;
color: white;
}
.item {
position: absolute;
width: 750px;
height: 300px;
/* background-color: blueviolet; */
left: 265px;
top: 50px;
}
.item div {
width: 750px;
height: 300px;
background-color: #eee;
display: none;
}
.item .show {
display: block;
}
</style>
</head>
<body>
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价</li>
<li>手机社区</li>
</ul>
<div class="item">
<div class="show">商品介绍</div>
<div>规格与包装</div>
<div>售后保障</div>
<div>商品评价</div>
<div>手机社区</div>
</div>
<script src="jquery.js"></script>
<script>
//jQuery实现
$("li").on("click", function() {
// 选中标题
$(this).addClass("current").siblings("li").removeClass("current");
$(".item div").eq($(this).index()).addClass("show").siblings("div").removeClass("show");
})
</script>
<!-- <script>
//原生JS实现
var liList = document.querySelectorAll("li");
var divList = document.querySelectorAll(".item div");
// 1.给每个li绑定事件
for (var i = 0; i < liList.length; i++) {
liList[i].setAttribute("index", i);
// 循环给每个li绑定事件
liList[i].onclick = function() {
// 排他思想：干掉其他人 留下自己
for (var i = 0; i < liList.length; i++) {
liList[i].className = "";
}
// this指代事件源，即当前点击的li
this.className = "current";
// 2.显示内容区域
var index = this.getAttribute("index");
console.log(index);
for (var i = 0; i < divList.length; i++) {
divList[i].style.display = "none";
}
divList[index].style.display = "block";
}
}
</script> -->
</body>
</html>点击上面的导航，下面的内容区域会根据上面的导航的切换二随之切换。
二.购物车[简易版]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 400px;
height: 350px;
border: 1px solid orange;
}
</style>
</head>
<body>
<div>
<p>商品名称：<span class="title">男士洗面奶</span></p>
<p>商品价格：
<span class="price">￥99</span>
</p>
<button>加入购物车</button>
</div>
</body>
</html>
<script>
var arr = [{
"title": "复习JS事件",
"price": "￥12",
"done": true,
"id": 0
}, {
"title": "生日文案",
"price": "￥32",
"done": true,
"id": 0
}, {
"title": "听/读书",
"price": "￥72",
"done": true,
"id": 0
}, {
"title": "写blog",
"price": "￥99",
"done": false,
"id": 0
}]
setData("todo", arr);
var collection;
window.onload = function() {
collection = getData();
}
var btn = document.querySelector("button");
btn.onclick = function() {
var title = this.parentNode.children[0].children[0].innerHTML;
var price = this.parentNode.children[1].children[0].innerHTML;
// 去重
if (collection.delRepeat() == collection) {
collection.push({
'title': title,
'price': price
})
} else {
collection.forEach(item => {
item.id++
});
}
setData("todo", collection);
setTimeout(function() {
location.href = "3-购物车列表.html";
}, 1000)
}
function setData(key, data) {
localStorage.setItem(key, JSON.stringify(data));
}
function getData() {
var collection = localStorage.getItem("todo");
// console.log(JSON.parse(collection));
if (collection != null) {
return JSON.parse(collection);
} else {
return [];
}
}
//数组去重
Array.prototype.delRepeat = function() {
var newArr = [];
var isrepeat;
for (var i = 0; i < this.length; i++) {
isrepeat = false;
for (var j = 0; j < newArr.length; j++) {
if (this[i] == newArr[j]) {
isrepeat = true;
break; //退出当前整个循环
}
}
if (!isrepeat) {
newArr.push(this[i]);
}
}
return newArr;
}
</script>点击加入购物车时，将数据存入本地。当每点击一次，数量+1。
<script>
var str = "";
window.onload = function() {
var collection = getData();
console.log(collection);
collection.forEach(item => {
str += `
<p><b>商品名称</b> ：<span class="title">${item.title}</span> <b>商品价格：</b><span class="price">${item.price}</span></p>`;
});
document.body.innerHTML = str;
}
function setData() {
localStorage.setItem("todo", JSON.stringify(arr));
}
function getData() {
var collection = localStorage.getItem("todo");
if (collection != null) {
return JSON.parse(collection);
} else {
return [];
}
}
</script>
三.全选与反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
width: 500px;
height: 150px;
background-color: #ddd;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="wrap">
全选:<input type="checkbox"><br>
<div class="chose">
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox">
</div>
</div>
<script src="jquery.js"></script>
<script>
//jquery实现
$(".wrap>input").on("click", function() {
$(".chose input").prop("checked", $(this).prop("checked"));
})
$(".chose input").on("click", function() {
//当选中的长度等于全选长度的时候,就让控制全选反选的checkbox设置为选中,否则就为未选中
if ($(".chose input").length === $(".chose input:checked").length) {
$(".wrap>input").prop("checked", true);
} else {
$(".wrap>input").prop("checked", false);
}
})
</script>
<!-- <script>
// 原生js实现全选
var ipt = document.querySelector(".wrap>input");
console.log(ipt);
var iptList = document.querySelectorAll(".chose input");
console.log(iptList);
// 1.实现全选和反选
ipt.onclick = function() {
// this.checked
for (var i = 0; i < iptList.length; i++) {
iptList[i].checked = this.checked;
}
} // s实现下面的复选框控制上面的全选和反选
for (var i = 0; i < iptList.length; i++) {
iptList[i].onclick = function() {
for (var j = 0; j < iptList.length; j++) {
//假设全选按钮选中
var flag = true;
// iptList[i].checked表示当前元素的选中状态（true）。假设第一个当前是选中，那么!iptList[i].checked这个是false。
if (!iptList[j].checked) {
flag = false;
break;
}
}
ipt.checked = flag;
}
}
</script> -->
</body>
</html>点击全选实现下面复选框全选。
点击下面的复选框实现上面的全选选中。