写个购物栏点击上边下边显示对应内容
时间: 2024-02-17 18:11:05 浏览: 17
<html>
<head>
<style>
#shopping-list {
list-style-type: none;
margin: 0;
padding: 0;
}
#shopping-list li {
display: block;
padding: 8px 16px;
background-color: #f6f6f6;
border: 1px solid #ddd;
cursor: pointer;
}
#shopping-list li:hover {
background-color: #ddd;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<ul id="shopping-list">
<li onclick="toggle('item1')">衣服</li>
<div id="item1" class="hidden">
<li>T恤</li>
<li>衬衫</li>
<li>裤子</li>
</div>
<li onclick="toggle('item2')">鞋子</li>
<div id="item2" class="hidden">
<li>运动鞋</li>
<li>皮鞋</li>
<li>帆布鞋</li>
</div>
<li onclick="toggle('item3')">配饰</li>
<div id="item3" class="hidden">
<li>手表</li>
<li>项链</li>
<li>耳环</li>
</div>
</ul>
<script>
function toggle(id) {
var element = document.getElementById(id);
if (element.classList.contains("hidden")) {
element.classList.remove("hidden");
} else {
element.classList.add("hidden");
}
}
</script>
</body>
</html>
以上是一个简单的购物栏示例代码,包含了三个商品类别:衣服、鞋子、配饰。当用户点击每个商品类别时,对应的内容会显示出来。点击商品类别时,使用 JavaScript 中的 toggle() 函数来添加或者移除 hidden 类,从而控制对应内容的显示或隐藏。用户可以根据需要添加更多的商品类别和对应的内容。