检查代码

千羽丶 · 发表于 2024-2-24 23:48:47

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>信息技术系学生会管理系统</title>
<link rel="stylesheet" type="text/css" href="左侧菜单栏.css">
<style>
</style>
</head>
<body>

<!-- 左侧菜单栏 -->
<div class="sidebar">
    <div class="logo">
        <img src="C:\Users\wjc94\Desktop\4d51cc5ad91e3207747e1089de174f0.png" alt="公司logo">
    </div>
    <a href="#" onclick="showContent('menu-item-1')">主页</a>
    <a href="#" onclick="showContent('menu-item-2')">秘书处</a>
    <a href="#" onclick="showContent('menu-item-3')">督察部</a>
    <a href="#" onclick="showContent('menu-item-4')">劳动部</a>
    <a href="#" onclick="showContent('menu-item-5')">文体部</a>
    <a href="#" onclick="showContent('menu-item-6')">学习部</a>
    <a href="#" onclick="showContent('menu-item-7')">社会实践部</a>
    <a href="#" onclick="showContent('menu-item-8')">国旗班</a>
    <a href="#" onclick="showContent('menu-item-9')">礼仪队</a>
    <a href="#" onclick="showContent('menu-item-10')">自律委员会</a>
    <a href="#" onclick="showContent('menu-item-11')">卫生委员会</a>
    <a href="#" onclick="showContent('menu-item-12')">关于我们</a>
    <a href="#" onclick="showContent('menu-item-13')">联系我们</a>
</div>

<!-- 内容区域 -->
<div class="content">
    <!-- 每个菜单项对应的内容区域 -->
    <div id="menu-item-1">
        <h2>主页</h2>
        <p>这里是主页的内容。</p>
    </div>
    <div id="menu-item-2">
        <h2>秘书处</h2>
        <p>这里是秘书处的内容。</p>
    </div>
    <div id="menu-item-3">
        <h2>督察部</h2>
        <p>这里是督察部的内容。</p>
    </div>
    <!-- 添加其他菜单项对应的内容 -->
</div>

<script>
    function showContent(id) {
        var contents = document.querySelectorAll('.content > div');
        contents.forEach(function(content) {
            content.style.display = 'none';
        });
        var targetContent = document.getElementById(id);
        if (targetContent) {
            targetContent.style.display = 'block';
        }
    }
</script>

</body>
</html>

FishC · 发表于 2024-2-24 23:49:05

您的代码主要是一个简单的页面切换功能。根据给定的id参数，它会隐藏所有的内容，并将目标内容显示出来。

首先，通过`document.querySelectorAll('.content > div')`选择所有class为content的子元素div，并将它们保存在contents变量中。

然后使用forEach循环遍历contents数组，将每个div元素的display样式设置为'none'，以隐藏它们。

接下来，根据传入的id参数获取目标内容的元素，使用`document.getElementById(id)`函数获取到目标元素的引用，保存在targetContent变量中。

最后，如果有找到目标元素（不为null），则将该元素的display样式设置为'block'，以显示它。

不过，我发现你的代码中缺少了一个调用showContent函数的地方。你需要在对应的HTML元素上添加一个onclick事件，并调用showContent函数，例如：

<button onclick="showContent('secretary')">秘书处</button>

这样当点击按钮时，就会执行showContent函数，显示对应的内容。

希望这可以帮到你！如果还有其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

账号		自动登录	找回密码
密码			立即注册