|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
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>
复制代码 |
|