javascript - 在javascript中包含html文件的代码。使用包含
问题描述
有一个页面
其中，取决于从左栏中选择的菜单项（智能手机和小工具、笔记本电脑和电脑、电视、音频-视频、Hi-Fi、家庭和厨房家用电器、建筑和维修、房屋和小屋、照片、视频，系统安全，汽车用品，文具，家具和办公设备，美容和健康），左侧所选类别的子类别显示在窗口右侧。
我给代码
document.getElementById('dropdownwindow').style.position = "fixed";
document.getElementById('dropdownwindow').style.marginLeft = "0";
document.getElementById('dropdownwindow').style.marginTop = "0";
document.getElementById('dropdownwindow').style.display = "block";
console.log(document.getElementById('dropdownwindow').style.display);
document.getElementById('dropdownwindow').style.marginRight = "20%";
document.getElementById('dropdownwindow').style.width = "80%";
document.getElementById('dropdownwindowright').style.flex = "60%";
document.getElementById('dropdownwindow').style.backgroundColor = "#ffffff";
const menuelems = document.querySelectorAll('.menulistitem');
menuelems.forEach((menuelem) => {
menuelem.addEventListener('mouseover', (event) => {
event.target.style.cursor = "pointer";
event.target.classList.add('menulistitem_selected')
});
menuelem.addEventListener('mouseout', (event) => {
event.target.style.cursor = "pointer";
event.target.classList.remove('menulistitem_selected')
});
});#dropdownwindow {
display: none;
margin-left: 0;
margin-right: 100%;
height: 100vh;
z-index: 5;
}
#fullblock {
height: 100vh;
position: static;
}
.contentdropdownwindow {
display: flex;
/*justify-content: center;*/
}
.CatalogMenuLeft {
width: 25%;
}
.catalogheader {
width: 100%;
height: 30%;
/*display: flex;*/
/*justify-content: center;*/
margin-left: auto;
margin-right: auto;
}
.crossline,
.bottompart {
flex: 1;
/*width: 100%;*/
/*height: 33%;*/
}
.crosslineright {
width: 100%;
/*margin-top: 40px;*/
/*margin-left: 20px;*/
/*margin-right: 20px;*/
/*align: right;*/
text-align: right;
}
.windowheader {
flex: 1;
/*width: 100%;*/
/*height: calc(100% - 2*37.5px);*/
/*height: 34%;*/
margin: auto;
text-align: center;
}
.windowheader h4 {
flex: 1;
/*width: 100%;*/
margin: auto;
text-align: center;
}
.flexdisabledscrollbar1,
.flexdisabledscrollbar2,
.flexdisabledscrollbar3 {
flex: 0;
width: 5px;
border-right: 5px solid #f5f5f6;
}
.flexline1 {
display: flex;
justify-content: center;
height: 33%;
}
.flexline2 {
display: flex;
justify-content: center;
height: 34%;
}
.flexline3 {
display: flex;
justify-content: center;
height: 33%;
}
.flexcontent {
display: flex;
/*overflow-y: scroll;*/
}
#menulist {
flex: 1;
overflow: auto;
height: 400px;
}
.menulistitem {
padding-top: 5px;
padding-bottom: 5px;
}
/* Works on Firefox */
#menulist {
scrollbar-width: auto;
scrollbar-color: #b8b8bc #f5f5f6;
/*overflow-y: scroll;*/
/*height: 200px;*/
}
/* Works on Chrome, Edge, and Safari */
#menulist::-webkit-scrollbar-button {
display: none;
}
#menulist::-webkit-scrollbar {
width: 5px;
}
#menulist::-webkit-scrollbar-track {
background: #f5f5f6;
}
#menulist::-webkit-scrollbar-thumb {
background: #b8b8bc;
border-radius: 2.5px;
border: 0px solid #f5f5f6;
}
#menulist::-webkit-scrollbar-thumb:hover {
background: #b8b8bc;
}
.menulistitem_selected {
font-weight: bold;
cursor: pointer;
}
.menulistitem_selected::after {
content: "\2192";
/*position: absolute;*/
margin-left: 5px;
display: inline-block;
font-weight: 400;
transition: all .1s ease;
}
.close {
margin-top: -14px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
font-size: 24px;
cursor: pointer;
display: inline-block;
}
.dropdownwindowright {
width: 75%;
}
.CatalogMenuSearch #SearchBlock {
/*border-bottom: 1px solid orange;*/
}
#SearchBlock {
padding-top: 5px;
/*padding-left: 25px;*/
margin-left: 25px;
margin-right: 50px;
/*padding-right: 50px;*/
display: flex;
/*justify-content: flex-end;*/
height: 35px;
border-bottom: 1px solid #dfdfe1;
}
#SearchInputdiv {
height: 100%;
width: calc(100%-35px);
flex: 1;
/*color: #dfdfe1;*/
/*flex: calc(100%-35px);*/
}
#SearchInput {
width: 100%;
border-top: none;
border-left: none;
border-right: none;
border-bottom: none;
}
#SearchButtondiv {
height: 100%;
justify-content: flex-end;
width: 35px;
/*flex: 35px;*/
}
#SearchButton button svg {
vertical-align: middle;
fill: #dfdfe1;
/*justify-content: flex-end;
flex: 35px;*/
}
#SearchButton {
outline: none;
border: none;
background: transparent;
cursor: pointer;
}
#SearchButton:active {
outline: 1px solid blue;
}<div id="dropdownwindow">
<!-- <div class="crossline">
<div class="close">×</div>
</div> -->
<div class="contentdropdownwindow">
<div class="CatalogMenuLeft">
<div class="catalogheader">
<div class="flexline1">
<div class="crossline">
</div>
<div class="flexdisabledscrollbar1">
</div>
</div>
<div class="flexline2">
<div class="windowheader">
<h4>Каталог</h4>
</div>
<div class="flexdisabledscrollbar2">
</div>
</div>
<div class="flexline3">
<div class="bottompart">
</div>
<div class="flexdisabledscrollbar3">
</div>
</div>
</div>
<div class="flexcontent">
<div class="windowmenulist" id="menulist">
<div class="menulistitem">
Smartphonesandgadgets
</div>
<div class="menulistitem">
Ноутбуки и компьютеры
</div>
<div class="menulistitem">
Телевизоры, аудио-видео, Hi-Fi
</div>
<div class="menulistitem">
Бытовая техника для дома и кухни
</div>
<div class="menulistitem">
Строительство и ремонт
</div>
<div class="menulistitem">
Дом и дача
</div>
<div class="menulistitem">
Фото, видео, системы безопасности
</div>
<div class="menulistitem">
Автотовары
</div>
<div class="menulistitem">
Канцтовары, Мебель и Офисная техника
</div>
<div class="menulistitem">
Красота и здоровье
</div>
<div class="menulistitem">
Спорт и отдых
</div>
<div class="menulistitem">
Товары для геймеров
</div>
<div class="menulistitem">
Уцененные товары
</div>
<div class="menulistitem">
Подарочные сертификаты
</div>
<div class="menulistitem">
Сервисы и услуги
</div>
</div>
</div>
</div>
<div class="myscroll">
</div>
<div id="dropdownwindowright">
<div class="crosslineright">
<div class="close">×</div>
</div>
<div class="CatalogMenuSearch">
<div id="SearchBlock">
<div id="SearchInputdiv">
<input type="search" placeholder="Поиск по товарам" id="SearchInput">
</div>
<div id="SearchButtondiv">
<button id="SearchButton"><svg class=" Icon" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.22703 5.22703C7.86307 2.591 12.1369 2.591 14.773 5.22703C17.2298 7.68382 17.3968 11.5632 15.2742 14.2135L19.0607 18L18 19.0607L14.2135 15.2742C11.5632 17.3968 7.68381 17.2298 5.22703 14.773C2.59099 12.1369 2.59099 7.86307 5.22703 5.22703ZM13.7123 6.28769C11.6621 4.23744 8.33794 4.23744 6.28769 6.28769C4.23744 8.33795 4.23744 11.6621 6.28769 13.7123C8.33794 15.7626 11.6621 15.7626 13.7123 13.7123C15.7626 11.6621 15.7626 8.33795 13.7123 6.28769Z"></path></svg></button>
</div>
</div>
</div>
<div class="CatalogMenuRight">
</div>
</div>
</div>
<!--<div>-->
<!--</div>-->
</div>有一个智能手机和小工具.html 文件和一个 commonstylesformenuitems.css（当您将鼠标悬停在左栏菜单项上时应该加载）
.headercontent {
margin: 0 0 25px 0;
}
.menucategoryitem {
column-count: 3;
column-gap: 20px;
}
.menucategoryitem .menu__item {
padding: 0 20px 40px 0;
max-width: 260px;
break-inside: avoid;
}
.menucategoryitem .menu__item .headersubmenu {
font-size: 14px;
margin: 0 0 12px 0;
}
.menucategoryitem .menu__item ul {
padding: 0;
margin: 0;
list-style: none;
}
.menucategoryitem .menu__item ul li {
font-size: 14px;
}
/*.headersproductcategory {
}*/<h1 class="headercontent">Smartphonesandgadgets</h1>
<div class="menucategoryitem">
<div class="menu__item">
<h2 class="headersubmenu">Заголовок</h2>
<ul>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
</ul>
</div>
<div class="menu__item">
<h2 class="headersubmenu">Заголовок</h2>
<ul>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
</ul>
</div>
<div class="menu__item">
<h2 class="headersubmenu">Заголовок</h2>
<ul>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
</ul>
</div>
<div class="menu__item">
<h2 class="headersubmenu">Заголовок</h2>
<ul>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
</ul>
</div>
<div class="menu__item">
<h2 class="headersubmenu">Заголовок</h2>
<ul>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
</ul>
</div>
<div class="menu__item">
<h2 class="headersubmenu">Заголовок</h2>
<ul>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
</ul>
</div>
<div class="menu__item">
<h2 class="headersubmenu">Заголовок</h2>
<ul>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
<li>Смартфон</li>
</ul>
</div>
</div>应该是鼠标悬停
const menuelems=document.querySelectorAll('.menulistitem');
menuelems.forEach((menuelem) => { menuelem.addEventListener('mouseover', (event) => { event.target.style.cursor = "pointer";event.target.classList.add('menulistitem_selected')});
堵塞
<div class="CatalogMenuRight">
</div>
填充了文件的内容smartphonesandgadgets.html（如果只是加载页面而不将鼠标光标悬停在左侧列的菜单项上，则菜单项 Smartphones and gadgets 的窗口内容应在右侧打开） . 如何才能做到这一点？这样的建筑可能吗
document.getElementsByClassName('CatalogMenuRight')[0].innerHTML+=include('../html/smartphonesandgadgets.html');
?
解决方案
推荐阅读
- python - 使用 normalize 展平三重嵌套 JSON
- php - 将给定的相对 url 转换为绝对 url
- c# - 如何取消转义 URL 中的特殊字符？
- php - Laravel：处理多个计数查询
- reactjs - 材质 UI 表中单元格的字体大小更改
- aws-lambda - 如何使用 cloudformation 将 cloudwatch 事件触发器添加到 AWS lambda？
- python - find_all() 仅返回列表的第一项
- php - TCPDF imageSVG() 渲染问题
- c# - JSON 序列化程序 - 当布尔值设置为 false 时，前端缺少键
- bash - 如何使用 awk 复制和粘贴多个列