如何不备案建网站,西安网站seo工作室,wordpress分类自定义字段,页面设计的优缺点目录 前言
目标
环境对象
作用
环境对象this是什么#xff1f;
判断this指向的粗略规则是什么#xff1f;
回调函数
目标
常见的使用场景
综合案例#xff1a;Tab任务栏切换
总结 前言
男儿何不带吴钩#xff0c;收取关山五十州 目标
能够分析判断函数运行在不…目录 前言
目标
环境对象
作用
环境对象this是什么
判断this指向的粗略规则是什么
回调函数
目标
常见的使用场景
综合案例Tab任务栏切换
总结 前言
男儿何不带吴钩收取关山五十州 目标
能够分析判断函数运行在不同环境中this所指代的对象
环境对象
指的是函数内部特殊的变量this它代表当前函数运行时所处的环境
作用
弄清楚this的指向可以使代码更简洁
函数的调用方式不同this所指代的对象不同
[谁调用this就是谁] 是判断this指向的粗略规则
直接调用函数其实相当于是 window.函数所以this 指代 window
环境对象this是什么
它代表着当前函数运行时所处的环境
判断this指向的粗略规则是什么
谁调用this就是谁
回调函数
目标
能够说出什么是回调函数
如果将函数 A做为参数传递给函数 B时我们称函数 A为回调函数简单理解:当一个函数当做参数来传递给另外一个函数的时候这个函数就是回调函数
常见的使用场景
function fn(){console.log(我是回调函数...)fn传递给了setIntervalfn就是回调函数setInterval(fn1000)
综合案例Tab任务栏切换
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.tab {width: 100%;height: 100%;}
.tab-nav {width: 490px;height: 40px;background-color: #fff;border: 1px solid #020202;display: flex;align-items: center;}
.tab-nav ul {list-style-type: none;padding-left: 0;margin: 0;display: flex;}
.tab-nav ul li {margin-right: 20px;height: 40px;display: flex;align-items: center;}
.tab-nav ul li a {text-decoration: none;color: inherit;padding: 0 10px;}
.tab-nav ul li a:hover {color: red;}
.tab-nav ul li:hover {background-color: gray;}
.tab-nav h3 {margin-right: 20px;margin-left: 20px;}
.tab-content {width: 450px;padding: 20px;border: 1px solid #020202;border-top: none;height: 300px;/* 增加高度以容纳更多内容 */overflow-y: auto;/* 添加滚动条 */}
.tab-content .item {display: none;margin-bottom: 20px;}
.tab-content .item.active {display: block;}
.item h2 {color: #333;}
.item p {color: #666;}
.item img {max-width: 100%;height: auto;margin-top: 10px;}/style
/head
bodydiv classtabdiv classtab-navh3每日特价/h3ullia classactive hrefjavascript:;精选/a/lilia hrefjavascript:;美食/a/lilia hrefjavascript:;百货/a/lilia hrefjavascript:;母婴/a/lilia hrefjavascript:;图书/a/li/ul/divdiv classtab-contentdiv classitem activeh2精选内容/h2p这里是精选内容的描述。/pimg srchttps://via.placeholder.com/150 alt精选图片/divdiv classitemh2美食内容/h2p这里是美食内容的描述。/pimg srchttps://via.placeholder.com/150 alt美食图片/divdiv classitemh2百货内容/h2p这里是百货内容的描述。/pimg srchttps://via.placeholder.com/150 alt百货图片/divdiv classitemh2母婴内容/h2p这里是母婴内容的描述。/pimg srchttps://via.placeholder.com/150 alt母婴图片/divdiv classitemh2图书内容/h2p这里是图书内容的描述。/pimg srchttps://via.placeholder.com/150 alt图书图片/div/div/div
scriptdocument.addEventListener(DOMContentLoaded, function () {const tabs document.querySelectorAll(.tab-nav ul li a);tabs.forEach((tab, index) {tab.addEventListener(mouseenter, function () {showTab(index);});});
function showTab(index) {const tabs document.querySelectorAll(.tab-nav ul li a);const contents document.querySelectorAll(.tab-content .item);
tabs.forEach(tab tab.classList.remove(active));contents.forEach(content content.classList.remove(active));
tabs[index].classList.add(active);contents[index].classList.add(active);}});/script
/body
/html 总结
莫等闲白了少年头空悲切。
