用对象替代 sw
function getOptionContent(option) {
const srcMap = {
option1: '地理',
option2: '化学',
option3: '历史',
option4: '生物',
option5: '数学',
option6: '物理',
option7: '音乐',
option8: '英语',
option9: '语文',
option10: '政治',
};
const src = srcMap[option];
if (!src) throw new Error('option is not valid');
return `<iframe src="${src}" width="100%" height="600px"></iframe>`;
}
因为用到连续序号，所以也可以是数组。
下面的写法其实有问题，当li为两位数时就越界了
var selectedLi = document.querySelector(`.sidebar li:nth-child(${option.slice(-1)})`);
function getOptionContent(option) {
const srcs = [
'地理',
'化学',
'历史',
'生物',
'数学',
'物理',
'音乐',
'英语',
'语文',
'政治',
];
const src = srcs[+option.replace('option', '') - 1];
if (!src) throw new Error('option is not valid');
return `<iframe src="${src}" width="100%" height="600px"></iframe>`;
}
最后，我会这么写
应该尽量使用 event 参数代替手动传递参数（虽然现在都用react,vue,但event在这些框架里也是经常操作的）
<!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">
<ul>
<li data-src="地理">地理</li>
<li data-src="化学">化学</li>
<li data-src="历史">历史</li>
<li data-src="生物">生物</li>
<li data-src="数学">数学</li>
<li data-src="物理">物理</li>
<li data-src="音乐">音乐</li>
<li data-src="英语">英语</li>
<li data-src="语文">语文</li>
<li data-src="政治">政治</li>
<!-- 添加更多选项 -->
</ul>
</div>
<div class="main-content" id="mainContent">
<h>请选择</h>
</div>
</div>
<script>
// 获取所有选项
const lis = document.querySelectorAll('.sidebar li');
// 获取内容区域
const mainContent = document.getElementById('mainContent');
// 添加点击事件监听器
lis?.forEach((li) => li.addEventListener('click', showContent));
// 保存最后选择的选项
let lastSelectedLi;
/**
* 显示内容
* @Param {Event} e 点击事件
*/
function showContent(e) {
// 清除所有选项的样式
// lis.forEach((li) => li.classList.remove('selected'));
// 清除当前选项的样式
if (lastSelectedLi) {
lastSelectedLi.classList.remove('selected');
}
// 添加选中选项的样式
const selectedLi = e.target;
selectedLi.classList.add('selected');
// 保存最后选择的选项
lastSelectedLi = selectedLi;
// 根据选项显示对应的内容
mainContent.innerHTML = `<iframe src="${selectedLi.dataset['src']}" width="100%" height="600px"></iframe>`;
}
</script>
</body>
</html>
还有上面有带佬提到的js列表驱动（新增内容把修改html改为修改js）
<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: '地理',
},
{
id: 1,
name: '化学',
url: '化学',
},
{
id: 2,
name: '历史',
url: '历史',
},
{
id: 3,
name: '生物',
url: '生物',
},
{
id: 4,
name: '数学',
url: '数学',
},
{
id: 5,
name: '物理',
url: '物理',
},
{
id: 6,
name: '音乐',
url: '音乐',
},
{
id: 7,
name: '英语',
url: '英语',
},
{
id: 8,
name: '语文',
url: '语文',
},
{
id: 9,
name: '政治',
url: '政治',
},
];
// 创建 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>
发表于 2024-8-1 11:13
|
发表于 2024-8-1 11:42
