console
document.querySelectorAll('.sidebar a').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
window.location.href = this.getAttribute('href');
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>管理系统</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="sidebar">
<ul>
<li>
<a href="#">基础信息</a>
<ul class="sub-menu">
<li><a href="warehouse_info.html">仓库信息</a></li>
<li><a href="materials.html">材料</a></li>
<li><a href="customers.html">客户</a></li>
<li><a href="suppliers.html">供应商信息</a></li>
<li><a href="customer_categories.html">客户分类</a></li>
<li><a href="project_types.html">项目类型</a></li>
<li><a href="work_categories.html">工种分类</a></li>
<li><a href="income_expense_types.html">收支类型</a></li>
<li><a href="company.html">所属公司</a></li>
<li><a href="material_categories.html">材料分类</a></li>
</ul>
</li>
<li>
<a href="#">项目管理</a>
<ul class="sub-menu">
<li><a href="project_info.html">项目信息</a></li>
<li><a href="cost_estimation.html">成本预估</a></li>
<li><a href="project_quotation.html">项目报价</a></li>
<li><a href="project_budget.html">项目预算</a></li>
</ul>
</li>
<li>
<a href="#">合同管理</a>
<ul class="sub-menu">
<li><a href="income_contracts.html">收入合同</a></li>
<li><a href="expense_contracts.html">支出合同</a></li>
</ul>
</li>
<li>
<a href="#">费用管理</a>
<ul class="sub-menu">
<li><a href="expense_reimbursement.html">费用报销</a></li>
<li><a href="payment_request.html">付款申请</a></li>
<li><a href="income_production.html">收入产值</a></li>
<li><a href="expense_production.html">支出产值</a></li>
<li><a href="receipt_registration.html">收款登记</a></li>
<li><a href="payment_registration.html">付款登记</a></li>
<li><a href="output_invoice.html">销项发票</a></li>
<li><a href="input_invoice.html">进项发票</a></li>
<li><a href="income_settlement.html">收入结算</a></li>
<li><a href="expense_settlement.html">支出结算</a></li>
<li><a href="account_opening_request.html">开户申请</a></li>
<li><a href="bank_accounts.html">银行账户</a></li>
<li><a href="supplementary_agreement.html">补充协议</a></li>
<li><a href="fund_flow.html">资金流水</a></li>
<li><a href="borrowing.html">借款</a></li>
<li><a href="repayment.html">还款</a></li>
</ul>
</li>
<li>
<a href="#">物料管理</a>
<ul class="sub-menu">
<li><a href="purchase_request.html">采购申请</a></li>
<li><a href="purchase_order.html">采购订单</a></li>
<li><a href="purchase_inbound.html">采购入库</a></li>
<li><a href="purchase_return.html">采购退货</a></li>
<li><a href="material_pickup.html">材料领用</a></li>
<li><a href="material_allocation.html">材料调拨</a></li>
<li><a href="initial_inventory.html">期初库存</a></li>
<li><a href="material_inventory.html">材料库存</a></li>
<li><a href="inventory_check.html">库存盘点</a></li>
<li><a href="inbound_outbound_flow.html">出入库流水</a></li>
</ul>
</li>
<li>
<a href="#">投标管理</a>
<ul class="sub-menu">
<li><a href="bid_registration.html">招标报名</a></li>
<li><a href="qualification_review.html">资格审查</a></li>
<li><a href="bid_document_deposit.html">投标文件保证金</a></li>
<li><a href="bid_document_audit.html">投标文件审核</a></li>
<li><a href="business_expenses.html">业务费用</a></li>
<li><a href="bid_win_registration.html">中标登记</a></li>
<li><a href="deposit_return.html">保证金退回</a></li>
<li><a href="performance_bond.html">履约担保</a></li>
<li><a href="record_registration.html">备案登记</a></li>
</ul>
</li>
<li>
<a href="#">设备管理</a>
<ul class="sub-menu">
<li><a href="equipment_demand.html">设备需求</a></li>
<li><a href="equipment_info.html">设备信息</a></li>
<li><a href="equipment_allocation.html">设备调拨</a></li>
<li><a href="equipment_rental.html">设备租赁</a></li>
<li><a href="equipment_usage.html">设备使用</a></li>
<li><a href="equipment_maintenance.html">设备维护</a></li>
<li><a href="equipment_scrap.html">设备报废</a></li>
</ul>
</li>
<li>
<a href="#">数据分析</a>
<ul class="sub-menu">
<li><a href="company_analysis.html">公司经营分析</a></li>
<li><a href="project_overview.html">项目概览</a></li>
<li><a href="customer_accounts.html">客户账款</a></li>
<li><a href="purchase_price_analysis.html">采购价格分析</a></li>
<li><a href="material_inventory_analysis.html">材料库存分析</a></li>
<li><a href="material_inbound_outbound_analysis.html">材料出入库分析</a></li>
<li><a href="income_contract_execution.html">收入合同执行</a></li>
<li><a href="supplier_accounts.html">供应商账款</a></li>
<li><a href="expense_contract_execution.html">支出合同执行</a></li>
<li><a href="fund_account_analysis.html">资金账户分析</a></li>
</ul>
</li>
</ul>
</div>
<div class="content">
</div>
<script src="scripts.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
}
.sidebar {
width: 200px;
background-color: #333;
color: white;
padding: 20px;
height: 100vh;
overflow-y: auto;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar ul li {
margin-bottom: 10px;
}
.sidebar ul li a {
color: white;
text-decoration: none;
display: block;
padding: 10px;
}
.sidebar ul li a:hover {
background-color: #555;
}
.sidebar ul ul {
display: none;
padding-left: 20px;
}
.sidebar ul li:hover > ul {
display: block;
}
.content {
flex-grow: 1;
padding: 20px;
}