web中点击li显示隐藏页面

在Web开发中，通常通过JavaScript或jQuery等前端技术来实现列表项（`<li>`）的点击事件，使其关联的页面内容动态地显示或隐藏。这个过程一般涉及到以下几个步骤：

1. HTML结构：首先，`<li>`元素会有一个或多个标识符，比如`data-url`属性，存储对应页面的URL或ID。

<ul id="list">
   <li data-url="#page1">页一</li>
   <li data-url="#page2">页二</li>
   <!-- 更多li... -->
</ul>

<div class="hidden-page" id="page1">这是页面一的内容...</div>
<div class="hidden-page" id="page2">这是页面二的内容...</div>

2. JavaScript绑定事件：使用`addEventListener`给每个`<li>`添加点击事件处理函数。

document.getElementById('list').addEventListener('click', function(e) {
    var target = e.target;
    if (target.tagName === 'LI') {
        showPage(target.dataset.url);
        hideOthers();
    }
});

3. 显示和隐藏功能：编写两个函数，`showPage`用于显示指定页面，`hideOthers`用于隐藏所有其他已显示的页面。

function showPage(url) {
    var page = document.getElementById(url);
    if (!page.classList.contains('hidden')) {
        page.style.display = 'block';
        Array.from(document.querySelectorAll('.hidden-page')).forEach(function(page) {
            if (page !== page) { // 避免重复隐藏自身
                page.classList.add('hidden');
            }
        });
    }
}

function hideOthers() {
    document.querySelectorAll('.hidden-page').forEach(function(page) {
        if (page !== currentActivePage) {
            page.classList.add('hidden');
        }
    });
}