网站申请域名,网站建设手机站,怎样把自己做的网站上传,wordpress dux4.0目录 前言
监听代码
思路
代码
事件委托代码
思路
代码
总结 前言
星垂平野阔#xff0c;月涌大江流 监听代码
思路 等待DOM加载完成 获取所有标签 为每个标签添加鼠标悬停事件监听器 定义showTab函数#xff1a; 接收一个索引参数index#xff0c;用于标识当前悬停…
目录 前言
监听代码
思路
代码
事件委托代码
思路
代码
总结 前言
星垂平野阔月涌大江流 监听代码
思路 等待DOM加载完成 获取所有标签 为每个标签添加鼠标悬停事件监听器 定义showTab函数 接收一个索引参数index用于标识当前悬停的标签 获取所有的标签和内容项 移除所有active类 为当前悬停的标签对应的内容添加active类 代码
!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
事件委托代码
思路 等待DOM加载完成 获取父元素 添加点击事件监听器 获取所有标签和内容项 移除所有active类 获取当前点击的标签的索引 添加active类 代码
!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 tabNav document.querySelector(.tab-nav ul);
tabNav.addEventListener(click, function (e) {if (e.target.tagName A) {// 获取所有标签const tabs document.querySelectorAll(.tab-nav ul li a);// 获取所有内容项const contents document.querySelectorAll(.tab-content .item);
// 移除所有标签的 active 类tabs.forEach(tab tab.classList.remove(active));// 移除所有内容项的 active 类contents.forEach(content content.classList.remove(active));
// 获取当前点击的标签的索引const index Array.from(tabs).indexOf(e.target);
// 为当前点击的标签添加 active 类tabs[index].classList.add(active);// 为对应的内容项添加 active 类contents[index].classList.add(active);}});});/script
/body
/html 总结
明月出天山苍茫云海间
