文章目录
前言-DOM基本概念
- 概念
DOM（Document Object Model，文档对象模型）是 JavaScript 操作 HTML 文档的接口，使文档操作变得非常优雅、简便。
DOM 最大的特点就是将 HTML 文档表示为 “节点树”。
DOM 元素/节点：就是渲染到页面上的，一个个的 HTML 标签体（标签 + 属性 + 内容）。 - DOM节点树
整个 html 文档就对应一个 document 对象，可以操作 html 文档里面所有的标签及其属性和文本
一、document
1.1 认识 document 对象
- 访问元素节点
- 所谓 “访问” 元素节点，就是指 “得到”、“获取” 页面上的元素节点
- 对节点进行操作，第一步就是要得到它
- 访问元素节点主要依靠 document 对象
- document对象
- document 对象是 DOM 中最重要的东西，几乎所有 DOM 的功能都封装在了 document 对象中
- document 对象也表示整个 HTML 文档，它是 DOM 节点树的根
- document 对象的 nodeType 属性值是 9
1.2 访问元素节点的常用方法
注意：以下方法的参数都是字符串类型 ''。
| 方法 | 功能 | 兼容性 |
|---|---|---|
document.getElementById() | 通过 id 得到元素 | IE 6 |
document.getElementsByTagName() | 通过标签名得到元素数组 | IE 6 |
document.getElementsByClassName() | 通过类名得到元素数组 | IE 9 |
document.querySelector() | 通过选择器得到元素（es6新特性） | IE 8 部分兼容、IE 9 完全兼容 |
document.querySelectorAll() | 通过选择器得到元素数组（es6新特性） | IE 8 部分兼容、IE 9 完全兼容 |
Element：元素
query：查询
Selector：选择器
方法示例
console.log(document.nodeType);
console.log(document.getElementsByTagName('h1')[0].nodeType);
console.log(document.getElementsByTagName('h1')[0].firstChild.nodeType);
console.log(document.getElementsByClassName('box')[0]);
console.log(document.getElementById('h2'));
//通过选择器获取元素
console.log(document.querySelector('.box'));
console.log(document.querySelector('#h2'));
console.log(document.querySelectorAll('div')[0]);
document.querySelector('h1').style.backgroundColor='blue';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dom</title>
</head>
<body>
<div>1</div>
<div id = 'box1'></div>
<div class = 'box2'></div>
<!-- dom属于js操作 -->
<script>
//获取节点值判断类型
console.log(document.nodeType); //9
//获取标签nodeType(?)
//getElementsByTagName——根据标签获取元素
var box = document.getElementsByTagName('div')[0];
console.log(box.nodeType);
//获取文本域
console.log(box.firstChild.nodeType); //3
//获取元素的方法
//getElementById —— 根据ID获取元素
console.log(document.getElementById('box1'));
//getElementsByClassName —— 有‘s’，获取的是数组
console.log(document.getElementsByClassName('box2'));
//通过选择器来获取querySelector #—id
console.log(document.querySelector('#box1'));
//querySelectorAll .——class
console.log(document.querySelectorAll('.box2'));
</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>
</head>
<body>
<div>
11111111
</div>
<div>
11111111
</div>
<div id="box1"> </div>
<div class="box2"></div>
<div id="test">
我是文本子节点 <!-- 占一个长度 -->
<div>孙子</div> <!-- 占一个长度 -->
<!-- 文本域剩下部分也占一个长度 -->
</div>
<script>
// 内置对象
console.log(document.nodeName);
console.log(document.nodeType);
var box=document.getElementsByTagName('div')[2];//[]:里面是div标签数组的索引(不能超过div的数量)
console.log(box.nodeType);
console.log(box.firstChild.nodeType);
console.log(document.getElementById("box1"));
console.log(document.getElementsByClassName("box1"));//返回值是数组
console.log(document.querySelector("#box1"));
console.log(document.querySelectorAll('.box2'));//返回值是数组
var box=document.getElementById("test");
console.log(box.nextSibling);
console.log(box.previousSibling);
console.log(box.childNodes.length);//返回的是一个数组 可以指定索引
console.log(box.childNodes[0]);//指定索引位置节点
console.log(box.firstChild);//第一个节点
console.log(box.lastChild);//最后一个节点
console.log(box.parentNode);//父节点
console.log(box.getAttribute("id"));//获取属性
console.log(box.removeAttribute("id"));//移除属性
console.log(box.getAttribute("id"));//再获取属性
console.log(box.setAttribute("id","yest"));//新建属性
console.log(box.getAttribute("id"));//再获取属性
</script>
</body>
</html>
- querySelector和getElementById获取元素的不同之处
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn1">按我创建一个新列表项</button>
无序列表
<ul id="list1">
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
</ul>
<button id="btn2">按我创建一个新列表项</button>
无序列表
<ul class="list2">
<li>列表项2</li>
<li>列表项2</li>
<li>列表项2</li>
</ul>
<script>
var list1 = document.getElementById("list1");
var list2 = document.querySelector('.list2');
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var listE = list1.getElementsByTagName('li');
var listS = list2.querySelectorAll('li');
btn1.onclick = function () {
// 创建新的li元素
var oLi = document.createElement('li');
// 写内容
oLi.innerText = '我是新来的';
// 上树
list1.appendChild(oLi);
console.log("list1有" + listE.length+"个li");
console.log("---------------------------------------");
};
btn2.onclick = function () {
// 创建新的li元素
var oLi = document.createElement('li');
// 写内容
oLi.innerText = '我是新来的';
// 上树
list2.appendChild(oLi);
console.log("list2有" + listS.length+"个li");
console.log("---------------------------------------");
};
</script>
</body>
</html>
二、节点的关系
| 关系 | 考虑所有结点 |
|---|---|
| 子节点 | childNodes |
| 父节点 | parentNode |
| 第一个子节点 | firstChild |
| 最后一个子节点 | lastChild |
| 前一个兄弟节点 | previousSibling |
| 后一个兄弟节点 | nextSibling |
- 从 IE9 开始支持一些 “只考虑元素节点” 的属性。
如果考虑兼容性，可以通过后面的函数封装来实现。
| 关系 | 考虑所有结点 | 只考虑元素节点 |
|---|---|---|
| 子节点 | childNodes | children |
| 父节点 | parentNode | 同 |
| 第一个子节点 | firstChild | firstElementChild |
| 最后一个子节点 | lastChild | lastElementChild |
| 前一个兄弟节点 | previousSibling | previousElementSibling |
| 后一个兄弟节点 | nextSibling | nextElementSibling |
- 书写常见的节点关系函数(案例理解)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p id="fpara">我是段落fpara</p>
我是文本
<!-- 我是注释 -->
<p id="para">
我是段落para
<span>1</span>
<span>2</span>
<span>3</span>
</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</div>
<script>
var box = document.getElementById('box'); //div
var para = document.getElementById('para'); //p
var fpara = document.getElementById('fpara'); //p
// 封装一个函数，这个函数可以返回元素的所有子元素节点（兼容到 IE6），类似 children 的功能
function getChildren(node) {
// 结果数组
var children = [];
// 遍历 node 这个节点的所有子节点，判断每一个子节点的 nodeType 属性是不是 1
// 如果是 1，就推入结果数组
for (var i = 0; i < node.childNodes.length; i++) {
if (node.childNodes[i].nodeType == 1) {
children.push(node.childNodes[i]);
}
}
return children;
}
console.log(getChildren(box));
console.log(getChildren(para));
// 封装一个函数，这个函数可以返回元素的前一个元素兄弟节点（兼容到 IE6），类似 previousElementSibling 的功能
function getElementPrevSibling(node) {
var o = node;
// 使用 while 语句
while (o.previousSibling != null) {
if (o.previousSibling.nodeType == 1) {
// 结束循环，找到了
return o.previousSibling;
}
// 让 o 成为它的前一个节点
o = o.previousSibling;
}
return null;
}
console.log(getElementPrevSibling(para));
console.log(getElementPrevSibling(fpara));
// 封装第三个函数，这个函数可以返回元素的所有元素兄弟节点
function getAllElementSibling(node) {
// 前面的元素兄弟节点
var prevs = [];
// 后面的元素兄弟节点
var nexts = [];
var o = node;
// 遍历 node 的前面的节点
while (o.previousSibling != null) {
if (o.previousSibling.nodeType == 1) {
prevs.unshift(o.previousSibling);//将新项添加到数组起始位置
}
o = o.previousSibling;
}
o = node;
// 遍历 node 的后面的节点
while (o.nextSibling != null) {
if (o.nextSibling.nodeType == 1) {
nexts.push(o.nextSibling);//将新项添加到数组末尾位置
}
o = o.nextSibling;
}
// 将两个数组进行合并，然后返回
return prevs.concat(nexts);
}
console.log(getAllElementSibling(para));
</script>
</body>
</html>
三、节点操作
3.1 如何改变元素节点中的内容
参考的是其他课程的笔记
改变元素节点中的内容可以使用两个相关属性。
innerHTMLinnerText
innerHTML 属性能以 HTML 语法设置节点中的内容。
innerText 属性只能以纯文本的形式设置节点中的内容。
- innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
var oBox = document.getElementById('box');
oBox.innerHTML = '周吉瑞';
</script>
</body>
</html>
- innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
var oBox = document.getElementById('box');
// 注意：此处的 HTML 字符串不允许换行！
oBox.innerHTML = '<ul><li>牛奶</li><li>咖啡</li></ul>';
</script>
</body>
</html>
- innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
var oBox = document.getElementById('box');
oBox.innerText = '周吉瑞';
</script>
</body>
</html>
3.2 如何改变元素节点的CSS样式
改变元素节点的 CSS 样式需要使用这样的语句：
oBox.style.backgroundColor = 'red';oBox.style.backgroundImage = 'url(images/1.jpg)';oBox.style.fontSize = '32px';
【注意事项】
- CSS 属性要写成 “驼峰” 形式
- CSS 属性值要设置成完整形式
- 注意写单位
<!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>
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="box" id="box">
你好
</div>
<script>
var oBox = document.getElementById('box');
oBox.style.backgroundColor = 'rgb(100, 200, 123)';
oBox.style.backgroundColor = '#f80';
oBox.style.backgroundImage = 'url(https://www.imooc.com/static/img/index/logo-recommended.png)';
oBox.style.backgroundSize = 'contain';
oBox.style.fontSize = '50px';
</script>
</body>
</html>
JS 修改的 CSS 样式，属于行内式，优先级最高！所以可以覆盖原有的样式。
3.3 如何改变元素节点的HTML属性
标准 W3C 属性，如 src、href、title、alt 等等，只需要直接打点进行更改即可。
oImg.src = 'images/2.jpg';
【案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="images/1.jpg" id="pic">
<a href="http://www.baidu.com" id="link">
去百度
</a>
<script>
var oPic = document.getElementById('pic');
var oLink = document.getElementById('link');
oPic.src = 'images/2.jpg';
oLink.href = 'http://www.imooc.com';
oLink.innerText = '去慕课网';
</script>
</body>
</html>
对于不符合 W3C 标准的属性，要使用 setAttribute() 和 getAttribute() 来设置、读取。
oBox.setAttribute('data-n', 10);
var n = oBox.getAttribute('data-n');
alert(n);
HTML 的自定义属性，主要用途就是与 JS 配合方便实现一些效果。
【案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
box.setAttribute('data-n', 10);
var n = box.getAttribute('data-n');
alert(n);
</script>
</body>
</html>
四、小米官网案例(部分)
要实现的功能
- 鼠标移至下载APP处 展示二维码功能
- 侧边栏展示隐藏功能
- 需要利用的属性
- display属性：
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示 |
二维码功能代码示例
- html文件
<body>
<!-- 导航栏1 -->
<div class="nav-box">
<div class="w">
<ul class="nav-xl">
<!-- <a href="#">XXXX</a>
该标签是用来规定链接指向的页面的 URL 存放超链接
效果：点击XXXX后能跳转到指定内容的新页面-->
<li><a href="#">小米商城</a></li>
<li><a href="#">MUI</a></li>
<li><a href="#">loT</a></li>
<li><a href="#">云服务</a></li>
<li><a href="#">天星数科</a></li>
<li><a href="#">有品</a></li>
<li><a href="#">小爱开放平台</a></li>
<li><a href="#">企业团购</a></li>
<li><a href="#">资质证照</a></li>
<li><a href="#">协议规则</a></li>
<li id="download">
<a href="#">下载APP</a>
<i></i>
<div class="download">
<a href="#">
<img src="./image/主页图片/xiaomi-android.png" alt="">
小米商城APP
</a>
</div>
</li>
<!-- <li class="download">下载app <span>|</span>
<div class="sjx"></div>
<div class="app">
<img src="images/xiaomi-android.png" alt="">
<p>小米商城APP</p>
</div>
</li> -->
<li><a href="#">智能生活</a></li>
<li><a href="#">Select Location</a></li>
</ul>
</div>
</div>
</boby>
- css文件
body .nav-box .w .nav-xl #download {
position: relative;
width: 68px;
}
body .nav-box .w .nav-xl #download i {
display: none;
position: absolute;
top: 20px;
left: 25px;
width: 0;
height: 0;
border-color: transparent transparent white transparent;
border-style: solid;
border-width: 8px;
z-index: 9;
}
body .nav-box .w .nav-xl #download .download {
position: absolute;
top: 16px;
left: -28px;
margin-top: 20px;
width: 130px;
height: 0;
overflow: hidden;
box-shadow: 0px 1px 5px #aaa;
background-color: #fff;
transition: height 0.3s;
z-index: 999;
}
body .nav-box .w .nav-xl #download .download a {
font-size: 14px;
color: #000;
border: 0;
/* 给该区域(下载APP)设置一个光标 */
cursor: pointer;
}
body .nav-box .w .nav-xl #download .download a:hover {
color: #000;
}
body .nav-box .w .nav-xl #download .download a img {
display: block;
width: 100px;
height: 100px;
margin: 15px;
}
- js文件
// 下载APP二维码提示
function xmscBox(){
//querySelector：根据路径来获取指定的坐标
var lidownload=document.querySelector('#download');
var lidownload2=document.querySelector('#download .download');
var lidownload3=document.querySelector('#download i');
// 鼠标移入监听事件时要进行的样式操作
lidownload.οnmοuseenter=function(){
lidownload3.style.display="block";
lidownload2.style.height='150px';
}
// 鼠标移出监听事件后要进行的样式操作
lidownload.οnmοuseleave=function(){
lidownload3.style.display="none";
lidownload2.style.height='0px';
}
}
侧边栏展示功能
- html文件
<!-- 焦点图 -->
<div class="main-box">
<div class="w mb">
<ul class="nav-l">
<li>
<a href="#">手机
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/小米Alpha/CC9定制.jpg" alt="">小米 CC9定制</a>
<a href="#"><img src="./image/images/小米Alpha/Mi10.webp" alt="">小米 Mi10</a>
<a href="#"><img src="./image/images/小米Alpha/Redmi8.webp" alt="">Redmi8</a>
<a href="#"><img src="./image/images/小米Alpha/RedMiK30_Pro聚焦版.webp"
alt="">RedMiK30_Pro聚焦版</a>
<a href="#"><img src="./image/images/小米Alpha/RedmiK30Pro变焦版.webp"
alt="">RedmiK30Pro变焦版</a>
<a href="#"><img src="./image/images/小米Alpha/小米10Pro.webp" alt="">小米10Pro</a>
</ol>
<ol>
<a href="#"><img src="./image/images/小米Alpha/CC9定制.jpg" alt="">小米 CC9定制</a>
<a href="#"><img src="./image/images/小米Alpha/Mi10.webp" alt="">小米 Mi10</a>
<a href="#"><img src="./image/images/小米Alpha/Redmi8.webp" alt="">Redmi8</a>
<a href="#"><img src="./image/images/小米Alpha/RedMiK30_Pro聚焦版.webp"
alt="">RedMiK30_Pro聚焦版</a>
<a href="#"><img src="./image/images/小米Alpha/RedmiK30Pro变焦版.webp"
alt="">RedmiK30Pro变焦版</a>
<a href="#"><img src="./image/images/小米Alpha/小米10Pro.webp" alt="">小米10Pro</a>
</ol>
<ol>
<a href="#"><img src="./image/images/小米Alpha/CC9定制.jpg" alt="">小米 CC9定制</a>
<a href="#"><img src="./image/images/小米Alpha/Mi10.webp" alt="">小米 Mi10</a>
<a href="#"><img src="./image/images/小米Alpha/Redmi8.webp" alt="">Redmi8</a>
<a href="#"><img src="./image/images/小米Alpha/RedMiK30_Pro聚焦版.webp"
alt="">RedMiK30_Pro聚焦版</a>
<a href="#"><img src="./image/images/小米Alpha/RedmiK30Pro变焦版.webp"
alt="">RedmiK30Pro变焦版</a>
<a href="#"><img src="./image/images/小米Alpha/小米10Pro.webp" alt="">小米10Pro</a>
</ol>
</div>
</div>
</li>
<li>
<a href="#">电视 <span class="glyphicon glyphicon-chevron-right"></span></a>
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp"
alt="">Redmi红米电视R70A</a>
<a href="#"><img src="./image/images/RedMi-tv/Redmi_智能电视_MAX98.webp"
alt="">Redmi智能电视MAX98</a>
<a href="#"><img src="./image/images/RedMi-tv/小米全面屏电视E55A.jpg"
alt="">小米全面屏电视E55A</a>
<a href="#"><img src="./image/images/RedMi-tv/小米壁画电视 65英寸.jpg" alt="">小米壁画电视
65英寸</a>
<a href="#"><img src="./image/images/RedMi-tv/小米电视4A32英寸.png" alt="">小米电视4A32英寸</a>
<a href="#"><img src="./image/images/RedMi-tv/小米电视4A55英寸.jpg" alt="">小米电视4A55英寸</a>
</ol>
<ol>
<a href="#"><img src="./image/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp"
alt="">Redmi红米电视R70A</a>
<a href="#"><img src="./image/images/RedMi-tv/Redmi_智能电视_MAX98.webp"
alt="">Redmi智能电视MAX98</a>
<a href="#"><img src="./image/images/RedMi-tv/小米全面屏电视E55A.jpg"
alt="">小米全面屏电视E55A</a>
<a href="#"><img src="./image/images/RedMi-tv/小米壁画电视 65英寸.jpg" alt="">小米壁画电视
65英寸</a>
<a href="#"><img src="./image/images/RedMi-tv/小米电视4A32英寸.png" alt="">小米电视4A32英寸</a>
<a href="#"><img src="./image/images/RedMi-tv/小米电视4A55英寸.jpg" alt="">小米电视4A55英寸</a>
</ol>
<ol>
<a href="#"><img src="./image/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp"
alt="">Redmi红米电视R70A</a>
<a href="#"><img src="./image/images/RedMi-tv/Redmi_智能电视_MAX98.webp"
alt="">Redmi智能电视MAX98</a>
<a href="#"><img src="./image/images/RedMi-tv/小米全面屏电视E55A.jpg"
alt="">小米全面屏电视E55A</a>
<a href="#"><img src="./image/images/RedMi-tv/小米壁画电视 65英寸.jpg" alt="">小米壁画电视
65英寸</a>
<a href="#"><img src="./image/images/RedMi-tv/小米电视4A32英寸.png" alt="">小米电视4A32英寸</a>
<a href="#"><img src="./image/images/RedMi-tv/小米电视4A55英寸.jpg" alt="">小米电视4A55英寸</a>
</ol>
<ol>
<a href="#"><img src="./image/images/RedMi-tv/Redmi 红米电视 70英寸 R70A.webp"
alt="">Redmi红米电视R70A</a>
<a href="#"><img src="./image/images/RedMi-tv/Redmi_智能电视_MAX98.webp"
alt="">Redmi智能电视MAX98</a>
<a href="#"><img src="./image/images/RedMi-tv/小米全面屏电视E55A.jpg"
alt="">小米全面屏电视E55A</a>
<a href="#"><img src="./image/images/RedMi-tv/小米壁画电视 65英寸.jpg" alt="">小米壁画电视
65英寸</a>
<a href="#"><img src="./image/images/RedMi-tv/小米电视4A32英寸.png" alt="">小米电视4A32英寸</a>
<a href="#"><img src="./image/images/RedMi-tv/小米电视4A55英寸.jpg" alt="">小米电视4A55英寸</a>
</ol>
</div>
</div>
</li>
<li>
<a href="#">笔记本 平板<span class="glyphicon glyphicon-chevron-right"></span></a>
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/computer/游戏本2019款.webp" alt="">游戏本2019款</a>
<a href="#"><img src="./image/images/computer/小米笔记本Pro 15.png" alt="">小米笔记本Pro
15</a>
<a href="#"><img src="./image/images/computer/小米笔记本Air 12.5.png" alt="">小米笔记本Air
12.5</a>
<a href="#"><img src="./image/images/computer/小米笔记本 15.6.png" alt="">小米笔记本 15.6</a>
<a href="#"><img src="./image/images/computer/RedmiBook 14.webp" alt="">RedmiBook
14</a>
<a href="#"><img src="./image/images/computer/RedmiBook 13.webp" alt="">RedmiBook
13</a>
</ol>
<ol>
<a href="#"><img src="./image/images/computer/游戏本2019款.webp" alt="">游戏本2019款</a>
<a href="#"><img src="./image/images/computer/小米笔记本Pro 15.png" alt="">小米笔记本Pro
15</a>
<a href="#"><img src="./image/images/computer/小米笔记本Air 12.5.png" alt="">小米笔记本Air
12.5</a>
<a href="#"><img src="./image/images/computer/小米笔记本 15.6.png" alt="">小米笔记本 15.6</a>
<a href="#"><img src="./image/images/computer/RedmiBook 14.webp" alt="">RedmiBook
14</a>
<a href="#"><img src="./image/images/computer/RedmiBook 13.webp" alt="">RedmiBook
13</a>
</ol>
<ol>
<a href="#"><img src="./image/images/computer/游戏本2019款.webp" alt="">游戏本2019款</a>
<a href="#"><img src="./image/images/computer/小米笔记本Pro 15.png" alt="">小米笔记本Pro
15</a>
<a href="#"><img src="./image/images/computer/小米笔记本Air 12.5.png" alt="">小米笔记本Air
12.5</a>
<a href="#"><img src="./image/images/computer/小米笔记本 15.6.png" alt="">小米笔记本 15.6</a>
<a href="#"><img src="./image/images/computer/RedmiBook 14.webp" alt="">RedmiBook
14</a>
<a href="#"><img src="./image/images/computer/RedmiBook 13.webp" alt="">RedmiBook
13</a>
</ol>
<ol>
<a href="#"><img src="./image/images/computer/游戏本2019款.webp" alt="">游戏本2019款</a>
<a href="#"><img src="./image/images/computer/RedmiBook 13.webp" alt="">RedmiBook
13</a>
</ol>
</div>
</div>
</li>
<li>
<a href="#">家电 <span class="glyphicon glyphicon-chevron-right"></span></a>
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg"
alt="">小米全自动波轮洗衣机1A</a>
<a href="#"><img src="./image/images/home appliances/小米净水器.jpg" alt="">小米净水器</a>
<a href="#"><img src="./image/images/home appliances/米家互联网洗烘一体机10kg.png"
alt="">米家互联网洗烘一体机</a>
<a href="#"><img src="./image/images/home appliances/米家互联网空调C1（一级能效）.webp"
alt="">米家互联网空调C1</a>
<a href="#"><img src="./image/images/home appliances/米家互联网空调（一级能效）.png"
alt="">米家互联网空调</a>
<a href="#"><img src="./image/images/home appliances/米家扫地机器人.jpg" alt="">米家扫地机器人</a>
</ol>
<ol>
<a href="#"><img src="./image/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg"
alt="">小米全自动波轮洗衣机1A</a>
<a href="#"><img src="./image/images/home appliances/小米净水器.jpg" alt="">小米净水器</a>
<a href="#"><img src="./image/images/home appliances/米家互联网洗烘一体机10kg.png"
alt="">米家互联网洗烘一体机</a>
<a href="#"><img src="./image/images/home appliances/米家互联网空调C1（一级能效）.webp"
alt="">米家互联网空调C1</a>
<a href="#"><img src="./image/images/home appliances/米家互联网空调（一级能效）.png"
alt="">米家互联网空调</a>
<a href="#"><img src="./image/images/home appliances/米家扫地机器人.jpg" alt="">米家扫地机器人</a>
</ol>
<ol>
<a href="#"><img src="./image/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg"
alt="">小米全自动波轮洗衣机1A</a>
<a href="#"><img src="./image/images/home appliances/小米净水器.jpg" alt="">小米净水器</a>
<a href="#"><img src="./image/images/home appliances/米家互联网洗烘一体机10kg.png"
alt="">米家互联网洗烘一体机</a>
<a href="#"><img src="./image/images/home appliances/米家互联网空调C1（一级能效）.webp"
alt="">米家互联网空调C1</a>
<a href="#"><img src="./image/images/home appliances/米家互联网空调（一级能效）.png"
alt="">米家互联网空调</a>
<a href="#"><img src="./image/images/home appliances/米家扫地机器人.jpg" alt="">米家扫地机器人</a>
</ol>
<ol>
<a href="#"><img src="./image/images/home appliances/Redmi全自动波轮洗衣机1Ajpg.jpg"
alt="">小米全自动波轮洗衣机1A</a>
<a href="#"><img src="./image/images/home appliances/小米净水器.jpg" alt="">小米净水器</a>
<a href="#"><img src="./image/images/home appliances/米家互联网洗烘一体机10kg.png"
alt="">米家互联网洗烘一体机</a>
<a href="#"><img src="./image/images/home appliances/米家互联网空调C1（一级能效）.webp"
alt="">米家互联网空调C1</a>
<a href="#"><img src="./image/images/home appliances/米家互联网空调（一级能效）.png"
alt="">米家互联网空调</a>
<a href="#"><img src="./image/images/home appliances/米家扫地机器人.jpg" alt="">米家扫地机器人</a>
</ol>
</div>
</div>
</li>
<li>
<a href="#">出行 穿戴<span class="glyphicon glyphicon-chevron-right"></span></a>
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/第八部分images/title.jfif" alt="">手表</a>
<a href="#"><img src="./image/images/第八部分images/title.jpg" alt="">小米手表</a>
<a href="#"><img src="./image/images/第八部分images/小米手表Color 充电座.jpg"
alt="">小米手表充电座</a>
<a href="#"><img src="./image/images/第八部分images/小米手表Color 雅典黑.jpg"
alt="">小米手表典雅黑</a>
<a href="#"><img src="./image/images/第八部分images/小米手表标准版.jpg" alt="">小米手表标准版</a>
<a href="#"><img src="./image/images/第八部分images/米兔儿童学习手表 4Pro.jpg "
alt="">小米兔儿童学习手表</a>
</ol>
<ol>
<a href="#"><img src="./image/images/第八部分images/米家石英经典版 白色.jpg" alt="">米家石英经典版白色</a>
<a href="#"><img src="./image/images/第八部分images/米家石英经典版 黑色.jpg" alt="">米家石英经典版黑色</a>
<a href="#"><img src="./image/images/第八部分images/小米手表Color 充电座.jpg"
alt="">小米手表充电座</a>
<a href="#"><img src="./image/images/第八部分images/小米手表Color 雅典黑.jpg"
alt="">小米手表典雅黑</a>
<a href="#"><img src="./image/images/第八部分images/小米手表标准版.jpg" alt="">小米手表标准版</a>
<a href="#"><img src="./image/images/第八部分images/米兔儿童学习手表 4Pro.jpg "
alt="">小米兔儿童学习手表</a>
</ol>
<ol>
<a href="#"><img src="./image/images/第八部分images/小米手表Color 充电座.jpg"
alt="">小米手表充电座</a>
<a href="#"><img src="./image/images/第八部分images/小米手表Color 雅典黑.jpg"
alt="">小米手表典雅黑</a>
<a href="#"><img src="./image/images/第八部分images/小米手表标准版.jpg" alt="">小米手表标准版</a>
<a href="#"><img src="./image/images/第八部分images/米兔儿童学习手表 4Pro.jpg "
alt="">小米兔儿童学习手表</a>
</ol>
</div>
</div>
</li>
<li>
<a href="#">智能 路由器<span class="glyphicon glyphicon-chevron-right"></span></a>
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/intelligent hardware/Redmi小爱触屏音箱 8.webp"
alt="">Redmi小爱触屏音箱</a>
<a href="#"><img src="./image/images/intelligent hardware/Redmi小爱触屏音箱 8.webp"
alt="">Redmi小爱触屏音箱 8</a>
<a href="#"><img src="./image/images/intelligent hardware/小米小爱老师.jpg"
alt="">小爱老师</a>
<a href="#"><img src="./image/images/intelligent hardware/小米小爱触屏音箱.jpg"
alt="">小米小爱触屏音箱</a>
<a href="#"><img src="./image/images/intelligent hardware/小米米家智能摄像机云台版.jpg"
alt="">智能摄像机云台版</a>
<a href="#"><img src="./image/images/intelligent hardware/小米米家智能门锁.jpg"
alt="">智能门锁</a>
</ol>
<ol>
<a href="#"><img src="./image/images/intelligent hardware/Redmi小爱触屏音箱 8.webp"
alt="">Redmi小爱触屏音箱</a>
<a href="#"><img src="./image/images/intelligent hardware/Redmi小爱触屏音箱 8.webp"
alt="">Redmi小爱触屏音箱 8</a>
<a href="#"><img src="./image/images/intelligent hardware/小米小爱老师.jpg"
alt="">小爱老师</a>
<a href="#"><img src="./image/images/intelligent hardware/小米小爱触屏音箱.jpg"
alt="">小米小爱触屏音箱</a>
<a href="#"><img src="./image/images/intelligent hardware/小米米家智能摄像机云台版.jpg"
alt="">智能摄像机云台版</a>
<a href="#"><img src="./image/images/intelligent hardware/小米米家智能门锁.jpg"
alt="">智能门锁</a>
</ol>
<ol>
<a href="#"><img src="./image/images/intelligent hardware/Redmi小爱触屏音箱 8.webp"
alt="">Redmi小爱触屏音箱</a>
<a href="#"><img src="./image/images/intelligent hardware/Redmi小爱触屏音箱 8.webp"
alt="">Redmi小爱触屏音箱 8</a>
<a href="#"><img src="./image/images/intelligent hardware/小米米家智能门锁.jpg"
alt="">智能门锁</a>
</ol>
</div>
</div>
</li>
<li>
<a href="#">电源 配件<span class="glyphicon glyphicon-chevron-right"></span></a>
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/身体第五个部分/9号平衡车.jpg" alt="">9号平衡车</a>
<a href="#"><img src="./image/images/身体第五个部分/Redmi AirDots真无线蓝牙耳机.webp" alt="">Redmi
AirDots</a>
<a href="#"><img src="./image/images/身体第五个部分/光家剃须刀.webp" alt="">米家剃须刀</a>
<a href="#"><img src="./image/images/身体第五个部分/小米小爱音响.webp" alt="">小米小爱音响</a>
<a href="#"><img src="./image/images/身体第五个部分/小米插线板5孔位.jpg" alt="">小米插线板5孔位</a>
<a href="#"><img src="./image/images/身体第五个部分/小米真无线蓝牙耳机.webp" alt="">小米真无线蓝牙耳机</a>
</ol>
<ol>
<a href="#"><img src="./image/images/身体第五个部分/9号平衡车.jpg" alt="">9号平衡车</a>
<a href="#"><img src="./image/images/身体第五个部分/Redmi AirDots真无线蓝牙耳机.webp" alt="">Redmi
AirDots</a>
<a href="#"><img src="./image/images/身体第五个部分/光家剃须刀.webp" alt="">米家剃须刀</a>
<a href="#"><img src="./image/images/身体第五个部分/小米小爱音响.webp" alt="">小米小爱音响</a>
<a href="#"><img src="./image/images/身体第五个部分/小米插线板5孔位.jpg" alt="">小米插线板5孔位</a>
<a href="#"><img src="./image/images/身体第五个部分/小米真无线蓝牙耳机.webp" alt="">小米真无线蓝牙耳机</a>
</ol>
<ol>
<a href="#"><img src="./image/images/身体第五个部分/Redmi AirDots真无线蓝牙耳机.webp" alt="">Redmi
AirDots</a>
<a href="#"><img src="./image/images/身体第五个部分/小米真无线蓝牙耳机.webp" alt="">小米真无线蓝牙耳机</a>
<a href="#"><img src="./image/images/身体第五个部分/9号平衡车.jpg" alt="">9号平衡车</a>
</ol>
</div>
</div>
</li>
<li>
<a href="#">健康 儿童<span class="glyphicon glyphicon-chevron-right"></span></a>
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/Top1images/Mi 米家电磁炉.jpg" alt="">米家电磁炉</a>
<a href="#"><img src="./image/images/Top1images/MiAOPPE.jpg" alt="">/MiAOPPE</a>
<a href="#"><img src="./image/images/Top1images/Mi电饭煲.jpg" alt="">Mi电饭煲</a>
<a href="#"><img src="./image/images/Top1images/RedMiK30show.webp"
alt="">RedMiK30show</a>
<a href="#"><img src="./image/images/Top1images/蓝牙音箱.jpg" alt="">蓝牙音箱</a>
<a href="#"><img src="./image/images/第八部分images/米兔儿童学习手表 4Pro.jpg"
alt="">米兔儿童学习手表</a>
</ol>
<ol>
<a href="#"><img src="./image/images/Top1images/Mi 米家电磁炉.jpg" alt="">米家电磁炉</a>
<a href="#"><img src="./image/images/Top1images/MiAOPPE.jpg" alt="">/MiAOPPE</a>
<a href="#"><img src="./image/images/Top1images/Mi电饭煲.jpg" alt="">Mi电饭煲</a>
<a href="#"><img src="./image/images/Top1images/RedMiK30show.webp"
alt="">RedMiK30show</a>
<a href="#"><img src="./image/images/Top1images/蓝牙音箱.jpg" alt="">蓝牙音箱</a>
<a href="#"><img src="./image/images/第八部分images/米兔儿童学习手表 4Pro.jpg"
alt="">米兔儿童学习手表</a>
</ol>
<ol>
<a href="#"><img src="./image/images/Top1images/Mi 米家电磁炉.jpg" alt="">米家电磁炉</a>
<a href="#"><img src="./image/images/Top1images/MiAOPPE.jpg" alt="">/MiAOPPE</a>
<a href="#"><img src="./image/images/Top1images/Mi电饭煲.jpg" alt="">Mi电饭煲</a>
<a href="#"><img src="./image/images/Top1images/RedMiK30show.webp"
alt="">RedMiK30show</a>
<a href="#"><img src="./image/images/Top1images/蓝牙音箱.jpg" alt="">蓝牙音箱</a>
<a href="#"><img src="./image/images/第八部分images/米兔儿童学习手表 4Pro.jpg"
alt="">米兔儿童学习手表</a>
</ol>
</div>
</div>
</li>
<li>
<a href="#">耳机 音响<span class="glyphicon glyphicon-chevron-right"></span></a>
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/第六部分images/titleimages.webp" alt="">耳机</a>
<a href="#"><img src="./image/images/第六部分images/小米9ARE U OK保护壳.webp" alt="">小米9ARE U
OK保护壳</a>
<a href="#"><img src="./image/images/第六部分images/小米USB充电器30W快充版.webp"
alt="">小米USB充电器30W</a>
<a href="#"><img src="./image/images/第六部分images/小米USB充电器36W快充版(2...).jpg"
alt="">小米USB充电器36W</a>
<a href="#"><img src="./image/images/第六部分images/小米二合一数据线100cm.jpg"
alt="">小米二合一数据线100cm</a>
<a href="#"><img src="./image/images/第六部分images/小米无线充电宝青春版.webp"
alt="">小米无线充电宝青春版</a>
</ol>
<ol>
<a href="#"><img src="./image/images/第六部分images/小米车载充电器快充版(37W).webp"
alt="">小米车载充电器37W</a>
<a href="#"><img src="./image/images/第六部分images/洗手机.jfif" alt="">洗手机</a>
<a href="#"><img src="./image/images/第六部分images/米家LED随身灯.jpg" alt="">米家LED随身灯</a>
<a href="#"><img src="./image/images/第六部分images/米家自动洗手机套装.webp" alt="">米家自动洗手机套装</a>
<a href="#"><img src="./image/images/第六部分images/蓝牙耳机AirDots.webp"
alt="">蓝牙耳机AirDots</a>
<a href="#"><img src="./image/images/第六部分images/蓝牙耳机AirDots1.jpg"
alt="">蓝牙耳机AirDots1</a>
</ol>
<ol>
<a href="#"><img src="./image/images/第六部分images/titleimages.webp" alt="">耳机</a>
<a href="#"><img src="./image/images/第六部分images/小米9ARE U OK保护壳.webp" alt="">小米9ARE U
OK保护壳</a>
<a href="#"><img src="./image/images/第六部分images/小米USB充电器30W快充版.webp"
alt="">小米USB充电器30W</a>
<a href="#"><img src="./image/images/第六部分images/小米USB充电器36W快充版(2...).jpg"
alt="">小米USB充电器36W</a>
<a href="#"><img src="./image/images/第六部分images/小米二合一数据线100cm.jpg"
alt="">小米二合一数据线100cm</a>
<a href="#"><img src="./image/images/第六部分images/小米无线充电宝青春版.webp"
alt="">小米无线充电宝青春版</a>
</ol>
<ol>
<a href="#"><img src="./image/images/第六部分images/小米车载充电器快充版(37W).webp"
alt="">小米车载充电器37W</a>
<a href="#"><img src="./image/images/第六部分images/洗手机.jfif" alt="">洗手机</a>
<a href="#"><img src="./image/images/第六部分images/米家LED随身灯.jpg" alt="">米家LED随身灯</a>
<a href="#"><img src="./image/images/第六部分images/米家自动洗手机套装.webp" alt="">米家自动洗手机套装</a>
<a href="#"><img src="./image/images/第六部分images/蓝牙耳机AirDots.webp"
alt="">蓝牙耳机AirDots</a>
<a href="#"><img src="./image/images/第六部分images/蓝牙耳机AirDots1.jpg"
alt="">蓝牙耳机AirDots1</a>
</ol>
</div>
</div>
</li>
<li>
<a href="#">生活 箱包<span class="glyphicon glyphicon-chevron-right"></span></a>
<div class="item-box">
<div class="items">
<ol>
<a href="#"><img src="./image/images/第七部分images/米家背包.webp" alt="">米家背包</a>
<a href="#"><img src="./image/images/第七部分images/米家驱蚊器基础.版webp.webp"
alt="">米家驱蚊器基础版</a>
<a href="#"><img src="./image/images/第七部分images/小米商务旅多功能双肩包.webp"
alt="">小米商务旅多功能双肩包</a>
<a href="#"><img src="./image/images/第七部分images/小米巨能写中性笔.webp" alt="">小米巨能写中性笔</a>
<a href="#"><img src="./image/images/第七部分images/最生活毛巾-青春系列.jpg"
alt="">最生活毛巾-青春系列</a>
<a href="#"><img src="./image/images/第七部分images/米家保温杯.webp" alt="">米家保温杯</a>
</ol>
<ol>
<a href="#"><img src="./image/images/第七部分images/米家飞行眼镜.webp " alt="">米家飞行眼镜</a>
<a href="#"><img src="./image/images/第七部分images/米家驱蚊器基础.版webp.webp"
alt="">米家驱蚊器基础版</a>
<a href="#"><img src="./image/images/第七部分images/自动折叠伞.jpg" alt="">自动折叠伞</a>
<a href="#"><img src="./image/images/第七部分images/小米巨能写中性笔.webp" alt="">小米巨能写中性笔</a>
<a href="#"><img src="./image/images/第七部分images/最生活毛巾-青春系列.jpg"
alt="">最生活毛巾-青春系列</a>
<a href="#"><img src="./image/images/第七部分images/米家保温杯.webp" alt="">米家保温杯</a>
</ol>
<ol>
<a href="#"><img src="./image/images/第七部分images/米家飞行眼镜.webp " alt="">米家飞行眼镜</a>
<a href="#"><img src="./image/images/第七部分images/米家驱蚊器基础.版webp.webp"
alt="">米家驱蚊器基础版</a>
<a href="#"><img src="./image/images/第七部分images/自动折叠伞.jpg" alt="">自动折叠伞</a>
<a href="#"><img src="./image/images/第七部分images/小米巨能写中性笔.webp" alt="">小米巨能写中性笔</a>
<a href="#"><img src="./image/images/第七部分images/最生活毛巾-青春系列.jpg"
alt="">最生活毛巾-青春系列</a>
<a href="#"><img src="./image/images/第七部分images/米家保温杯.webp" alt="">米家保温杯</a>
</ol>
</div>
</div>
</li>
</ul>
<div class="banner">
<div class="swiper-container swiper-container-initialized swiper-container-horizontal">
<div class="swiper-wrapper" style="transform: translate3d(-1230px, 0px, 0px); transition-duration: 0ms;">
<div class="swiper-slide swiper-slide-prev" style="width: 1200px; margin-right: 30px;"><img src="./image/XaioMi10background.jpg" alt=""></div>
<div class="swiper-slide swiper-slide-active" style="width: 1200px; margin-right: 30px;"><img src="./image/小米Reami.jpg" alt=""></div>
<div class="swiper-slide swiper-slide-next" style="width: 1200px; margin-right: 30px;"><img src="./image/小米red.webp" alt=""></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span></div>
<!-- Add Arrows -->
<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-disabled="false"></div>
<div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide" aria-disabled="false"></div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
</div>
</div>
</div>
- css文件
body .main-box {
width: 1200px;
margin: 20px auto;
overflow: hidden;
}
body .main-box .mb {
position: relative;
width: 100%;
}
body .main-box .mb .nav-l {
background: rgba(105, 101, 101, 0.6);
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
float: left;
z-index: 2;
}
body .main-box .mb .nav-l li a {
position: relative;
display: block;
width: 220px;
height: 56px;
line-height: 56px;
color: #fff;
padding-left: 30px;
font-size: 14px;
}
/* 侧边栏列表选中变色功能 */
body .main-box .mb .nav-l li a:hover{
color:#fff;
background-color: #ff6a00 ;
transition: all 0.3s;
}
body .main-box .mb .nav-l li a span {
position: absolute;
top: 15px;
right: 30px;
}
body .main-box .mb .nav-l li .item-box {
display: none;
position: absolute;
top: 0;
left: 220px;
width: 980px;
height: 520px;
background-color: #fff;
z-index: 55;
}
body .main-box .mb .nav-l li .item-box .items ol {
float: left;
width: 237.5px;
height: 520px;
}
body .main-box .mb .nav-l li .item-box .items ol a {
padding: 10px;
width: 100% ;
height: 16.6%;
font-size: 14px;
color: #333;
}
body .main-box .mb .nav-l li .item-box .items ol a:hover {
/* color: #ff6a00; */
color:#fff;
background-color: #ff6a00 ;
transition: all 0.3s;
}
body .main-box .mb .nav-l li .item-box .items ol a img {
display: inline-block;
width: 50px;
height: 50px;
margin-right: 5px;
}
body .main-box .mb .banner {
float: left;
width: 100%;
height: 524px;
}
body .main-box .mb .banner .swiper-container {
width: 100%;
height: 100%;
}
body .main-box .mb .banner .swiper-container .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
body .main-box .mb .banner .swiper-container .swiper-slide img {
width: 100%;
height: 100%;
}
body .main-box .mb .banner .swiper-container .swiper-pagination {
left: 520px;
bottom: 30px;
color: #929292;
}
body .main-box .mb .banner .swiper-container .swiper-pagination-bullet-active {
background: #fff;
}
body .main-box .mb .banner .swiper-container .swiper-button-prev {
left: 235px;
}
- js文件
// 侧边栏展示隐藏功能
function cblBox(){
// var lidownload=document.getElementById('download');
// 获取到该坐标下的所有li标签 用数组接收
var lidownload=document.querySelectorAll('.nav-l li');
for (let index = 0; index < lidownload.length; index++) {
huaDongMen(index);
}
}
function huaDongMen(index){
var lidownload=document.querySelectorAll('.nav-l li');
var lidownload2=lidownload[index].querySelector('.item-box');
// #:引用id .：引用类
lidownload[index].οnmοuseenter=function(){
lidownload2.style.display="block";
}
lidownload[index].οnmοuseleave=function(){
lidownload2.style.display="none";
}
}
小结
重点看js文件中的DOM获取元素及对获取到的节点进行操作
写完js文件后记得要在html文件中进行引用
在 被包裹中创建js文件的对象
在js文件中编写一个方法里面再去调用其他方法
如下：
<script>
// 新建一个类似于创建对象的操作 将该对象赋给一个变量
var index=new index();
</script>
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
