<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>我的布告欄（分頁版）</title>
<style>
body {
font-family: Arial, "微軟正黑體", sans-serif;
background-color: #f2f2f2;
padding: 20px;
}
.board {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
max-width: 800px;
margin: auto;
}
h1 {
text-align: center;
color: #333;
}
.tabs {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.tabs button {
padding: 10px 20px;
margin: 0 5px;
border: none;
background-color: #ccc;
cursor: pointer;
font-size: 16px;
border-radius: 5px;
}
.tabs button.active {
background-color: #666;
color: white;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
</style>
</head>
<body>
<div class="board">
<h1>桌面布告欄</h1>
<div class="tabs">
<button class="tablink active" onclick="openTab('page1')">公告事項</button>
<button class="tablink" onclick="openTab('page2')">任務清單</button>
<button class="tablink" onclick="openTab('page3')">其他訊息</button>
</div>
<div id="page1" class="tab-content active">
<ul>
<li>今天要完成修理工作</li>
<li>5/1 要繳交月報表</li>
<li>記得訂5/5聚餐的位置</li>
</ul>
</div>
<div id="page2" class="tab-content">
<table>
<tr>
<th>項目</th>
<th>負責人</th>
<th>截止日期</th>
<th>狀態</th>
</tr>
<tr>
<td>修理客戶A的設備</td>
<td>小明</td>
<td>4/30</td>
<td>進行中</td>
</tr>
<tr>
<td>月報表整理</td>
<td>小美</td>
<td>5/1</td>
<td>未開始</td>
</tr>
<tr>
<td>聚餐訂位</td>
<td>阿志</td>
<td>5/3</td>
<td>完成</td>
</tr>
</table>
</div>
<div id="page3" class="tab-content">
<p>這裡可以放其他備忘錄或說明。</p>
</div>
</div>
<script>
function openTab(tabId) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
tabcontent[i].classList.remove("active");
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
document.getElementById(tabId).style.display = "block";
document.getElementById(tabId).classList.add("active");
event.currentTarget.classList.add("active");
}
</script>
</body>
</html>
留言
張貼留言