四个按钮分别控制四个ul里面的li
时间: 2024-01-05 22:04:47 浏览: 24
好的,你可以在每个按钮的 `onclick` 事件中调用一个函数,来控制对应的 `ul` 元素中的 `li` 元素。下面是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>控制列表</title>
<script>
function showList(listId) {
// 隐藏所有的列表
var lists = document.getElementsByTagName("ul");
for (var i = 0; i < lists.length; i++) {
lists[i].style.display = "none";
}
// 显示指定的列表
var list = document.getElementById(listId);
if (list) {
list.style.display = "block";
}
}
</script>
<style>
ul {
display: none; /* 默认隐藏 */
}
</style>
</head>
<body>
<button onclick="showList('list1')">显示列表1</button>
<button onclick="showList('list2')">显示列表2</button>
<button onclick="showList('list3')">显示列表3</button>
<button onclick="showList('list4')">显示列表4</button>
<ul id="list1">
<li>列表1 - 1</li>
<li>列表1 - 2</li>
<li>列表1 - 3</li>
</ul>
<ul id="list2">
<li>列表2 - 1</li>
<li>列表2 - 2</li>
<li>列表2 - 3</li>
</ul>
<ul id="list3">
<li>列表3 - 1</li>
<li>列表3 - 2</li>
<li>列表3 - 3</li>
</ul>
<ul id="list4">
<li>列表4 - 1</li>
<li>列表4 - 2</li>
<li>列表4 - 3</li>
</ul>
</body>
</html>
```
这个示例代码中有四个按钮,分别对应四个 `ul` 元素。每个按钮的 `onclick` 事件会调用 `showList` 函数,并传入一个参数,表示要显示的列表的 ID。`showList` 函数会先隐藏所有的 `ul` 元素,然后显示指定的 `ul` 元素。每个 `ul` 元素中包含三个 `li` 元素,用于显示具体的列表内容。