HTML左侧列表和右侧功能显示
```
<mainthread>
<!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 onclick="showContent('option1')">地理</li>
<li onclick="showContent('option2')">化学</li>
<li onclick="showContent('option3')">历史</li>
<li onclick="showContent('option4')">生物</li>
<li onclick="showContent('option5')">数学</li>
<li onclick="showContent('option6')">物理</li>
<li onclick="showContent('option7')">音乐</li>
<li onclick="showContent('option8')">英语</li>
<li onclick="showContent('option9')">语文</li>
<li onclick="showContent('option10')">政治</li>
<!-- 添加更多选项 -->
</ul>
</div>
<div class="main-content" id="mainContent">
<h>请选择</h>
</div>
</div>
<script>
function showContent(option) {
// 清除所有选项的样式
var lis = document.querySelectorAll('.sidebar li');
lis.forEach(li => {-
li.classList.remove('selected');
});
// 添加选中选项的样式
var selectedLi = document.querySelector(`.sidebar li:nth-child(${option.slice(-1)})`);
selectedLi.classList.add('selected');
// 根据选项显示对应的内容
var mainContent = document.getElementById('mainContent');
mainContent.innerHTML = getOptionContent(option);
}
function getOptionContent(option) {
switch(option) {
case 'option1':
return '<iframe src="地理" width="100%" height="600px"></iframe>';
case 'option2':
return '<iframe src="化学" width="100%" height="600px"></iframe>';
case 'option3':
return '<iframe src="历史" width="100%" height="600px"></iframe>';
case 'option4':
return '<iframe src="生物" width="100%" height="600px"></iframe>';
case 'option5':
return '<iframe src="数学" width="100%" height="600px"></iframe>';
case 'option6':
return '<iframe src="物理" width="100%" height="600px"></iframe>';
case 'option7':
return '<iframe src="音乐" width="100%" height="600px"></iframe>';
case 'option8':
return '<iframe src="英语" width="100%" height="600px"></iframe>';
case 'option9':
return '<iframe src="语文" width="100%" height="600px"></iframe>';
case 'option10':
return '<iframe src="政治" width="100%" height="600px"></iframe>';
}
}
</script>
</body>
</html>
</mainthread>
</div>
</div>
<eiduo-ui-foot _ngcontent-dch-c45="" _nghost-dch-c21="">
<div _ngcontent-dch-c21="" class="footer">
<div _ngcontent-dch-
``` 为什么最后一个选项没有反应 本帖最后由 kittylang 于 2024-8-1 22:57 编辑
用对象替代 sw
```js
function getOptionContent(option) {
const srcMap = {
option1: '地理',
option2: '化学',
option3: '历史',
option4: '生物',
option5: '数学',
option6: '物理',
option7: '音乐',
option8: '英语',
option9: '语文',
option10: '政治',
};
const src = srcMap;
if (!src) throw new Error('option is not valid');
return `<iframe src="${src}" width="100%" height="600px"></iframe>`;
}
```
因为用到连续序号，所以也可以是数组。
下面的写法其实有问题，当li为两位数时就越界了
```js
var selectedLi = document.querySelector(`.sidebar li:nth-child(${option.slice(-1)})`);
```
```js
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在这些框架里也是经常操作的）
```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">
<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）
```html
<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>
```
可以，有进步 能做成可以折叠的的左侧列表吗? 我想实现左侧可以折叠的目录导航,右侧显示具体内容. 另外代码好像不完成,最后好象少了 这什么意思 记录分享？ switch case完全没必要 kittylang 发表于 2024-8-1 11:39
switch case完全没必要
如果不用switch和case那应该怎么写？ 楼主是在自学嘛 20230713G001133 发表于 2024-8-1 11:42
如果不用switch和case那应该怎么写？
你好，我觉得可以把列表项写成比数组，例如 let list = [{ id: 0, name: '地理' },...]，然后html中循环展示，点击事件就可以直接传当前行的数据过来，那个switch直接用一行代码返回就行，例如 return `<iframe src=‘${option.name}’ width=‘100%’ height=‘600px’></iframe>`; 其中option为当前行数据。仅供参考哈。 学习了，有进步
页:
[1]
2