写一个网页,左边有一个包含多个类的列表,每个类下有多个子类,每个子类可以点击跳转链接
时间: 2024-05-22 10:13:21 浏览: 13
<!DOCTYPE html>
<html>
<head>
<title>类和子类列表</title>
</head>
<body>
<h1>类和子类列表</h1>
<ul>
<li class="class-a">A类
<ul>
<li><a href="#">A1子类</a></li>
<li><a href="#">A2子类</a></li>
<li><a href="#">A3子类</a></li>
</ul>
</li>
<li class="class-b">B类
<ul>
<li><a href="#">B1子类</a></li>
<li><a href="#">B2子类</a></li>
<li><a href="#">B3子类</a></li>
</ul>
</li>
<li class="class-c">C类
<ul>
<li><a href="#">C1子类</a></li>
<li><a href="#">C2子类</a></li>
<li><a href="#">C3子类</a></li>
</ul>
</li>
</ul>
</body>
</html>
相关问题
写一个网页,左边有一个包含多个类的列表,每个类下有多个子类
<!DOCTYPE html>
<html>
<head>
<title>分类列表</title>
</head>
<body>
<h1>分类列表</h1>
<div>
<ul>
<li class="category">电子产品
<ul>
<li>手机</li>
<li>电脑</li>
<li>平板电脑</li>
<li>电视</li>
</ul>
</li>
<li class="category">食品
<ul>
<li>零食</li>
<li>饮料</li>
<li>蔬菜</li>
<li>水果</li>
</ul>
</li>
<li class="category">服装
<ul>
<li>男装</li>
<li>女装</li>
<li>童装</li>
<li>运动服装</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
写一个网页,左边列表包含多个类,每个类下包含多个子类,每个子类可以点击跳转
可以使用 HTML 和 CSS 实现这个网页,以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Classes and Subclasses</title>
<style>
/* 设置列表样式 */
ul {
list-style: none;
margin: 0;
padding: 0;
}
/* 设置类的样式 */
.class {
font-weight: bold;
margin-top: 10px;
}
/* 设置子类的样式 */
.subclass {
margin-left: 20px;
}
/* 设置子类链接的样式 */
.subclass a {
text-decoration: none;
color: blue;
}
/* 设置选中链接的样式 */
.selected {
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<!-- 左侧列表 -->
<ul>
<li class="class">Class A
<ul>
<li class="subclass"><a href="#">Subclass 1</a></li>
<li class="subclass"><a href="#">Subclass 2</a></li>
<li class="subclass"><a href="#">Subclass 3</a></li>
</ul>
</li>
<li class="class">Class B
<ul>
<li class="subclass"><a href="#">Subclass 1</a></li>
<li class="subclass"><a href="#">Subclass 2</a></li>
</ul>
</li>
<li class="class">Class C
<ul>
<li class="subclass"><a href="#">Subclass 1</a></li>
</ul>
</li>
</ul>
<!-- 右侧内容区域 -->
<div id="content">
<h1>Welcome!</h1>
<p>Please select a subclass from the left menu.</p>
</div>
<script>
// 获取所有子类链接
const links = document.querySelectorAll(".subclass a");
// 为每个链接添加点击事件
links.forEach(link => {
link.addEventListener("click", event => {
event.preventDefault(); // 阻止链接默认行为
// 取消之前选中的样式
const selectedLink = document.querySelector(".selected");
if (selectedLink) {
selectedLink.classList.remove("selected");
}
// 添加当前选中的样式
link.classList.add("selected");
// 更新内容区域
const content = document.getElementById("content");
content.innerHTML = `<h1>${link.innerText}</h1><p>You have selected ${link.innerText}.</p>`;
});
});
</script>
</body>
</html>
```
这个网页包含一个左侧的列表,每个类下包含多个子类。当点击某个子类链接时,右侧的内容区域会更新。你可以根据自己的需要修改样式和内容。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)