HTML左侧列表和右侧功能显示
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>左侧列表和右侧功能显示</title>
<style>
.container {
display: flex;
width: 1175px;
height: calc(100vh - 10px); /* 设置内容区域高度为视口高度减去10px */
border: 1px solid #ccc;
overflow: hidden;
}
.sidebar {
flex: 1;
background-color: #f0f0f0;
padding: 20px;
border-right: 1px solid #ccc;
overflow-y: auto;
}
.main-content {
flex: 3;
padding: 20px;
overflow-y: auto; /* 如果内容过多，可以允许内容区域滚动 */
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar li {
margin-bottom: 10px;
cursor: pointer;
}
.sidebar li:hover {
color: #007bff;
}
.selected {
color: #007bff;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<!-- 添加更多选项 -->
</div>
<div class="main-content" id="mainContent">
<h>请选择</h>
</div>
</div>
<script>
// 获取选项容器
const sidebar = document.querySelector('.sidebar');
// 获取内容区域
const mainContent = document.getElementById('mainContent');
// 数据
const list = [
{
id: 0,
name: '淘宝',
url: 'https://www.taobao.com/',
},
{
id: 1,
name: '大众点评',
url: 'https://www.dianping.com/',
},
{
id: 2,
name: '天猫',
url: 'https://www.tmall.com/',
},
{
id: 3,
name: '1688',
url: 'https://p4psearch.1688.com/',
},
{
id: 4,
name: '携程旅行',
url: 'https://www.ctrip.com/',
},
{
id: 5,
name: 'BOSS直聘',
url: 'https://www.zhipin.com/',
},
{
id: 6,
name: '新浪',
url: 'https://www.sina.com.cn/',
},
{
id: 7,
name: '汽车之家',
url: 'https://www.autohome.com.cn/',
},
{
id: 8,
name: '凤凰网',
url: 'https://www.ifeng.com/',
},
{
id: 9,
name: '百度一下',
url: 'https://www.baidu.com',
},
];
// 创建 ul
const listElement = document.createElement('ul');
list.forEach((item) => {
const li = document.createElement('li');
// 设置 li 的文本内容
li.textContent = item.name;
// 添加点击事件监听器
li.addEventListener('click', (e) => showContent(e, item));
// 插入 li 到 ul
listElement.appendChild(li);
});
sidebar.appendChild(listElement);
// 保存最后选择的选项
let lastSelectedLi;
/**
* 显示内容
* @Param {Event} e 点击事件
* @Param {Object} option 选项
*/
function showContent(e, { url }) {
// 清除当前选项的样式
if (lastSelectedLi) {
lastSelectedLi.classList.remove('selected');
}
// 添加选中选项的样式
const selectedLi = e.target;
selectedLi.classList.add('selected');
// 保存最后选择的选项
lastSelectedLi = selectedLi;
// 根据选项显示对应的内容
mainContent.innerHTML = `<iframe src="${url}" width="100%" height="600px"></iframe>`;
}
</script>
</body>
</html>
附件详情
-
说明：
每次点击下载扣除1金币
-
附件名：
加载中...
- 附件分类：
- 账户经验： 0 点
[排行]
- 账户金币： 0 个
[兑换]
- 账户灵石： 0 枚
[充值]
上传用户：
颜诗雅
时间：2025-04-05
- 下载地址：
CSWL官方博客
