Express+JQuery实现简易选项卡

最新推荐文章于 2026-06-15 12:51:08 发布

原创

最新推荐文章于 2026-06-15 12:51:08 发布 · 1.6k 阅读

标签

#jquery #前端 #node.js

收录于

本文通过Node.js的Express框架和JQuery库，演示了一个简易选项卡功能，点击不同部门按钮，将从服务器获取并显示对应的员工JSON数据。实现了动态加载和跨域请求处理，具体包括HTML页面设计、JQuery事件绑定、Express服务器搭建以及JSON数据解析展示。

Express+JQuery实现简易选项卡

结果演示
test.html
test.js
employees.json

利用Node.js的express框架及JQuery来完成如下要求：
1.设计一个html页面，页面中有三个选项卡按钮，分别为：“人力资源部”，“开发部”，“后勤保障部”。
2.点击不同的按钮，用JQuery的get方法请求一个路由，如：http://localhost/dev
3.利用node.js及express搭建一个web服务，并响应第2点的get请求，返回部门的人员json数据
4.html页面拿到json数据后，在对应按钮下方构建数据。

结果演示

在这里插入图片描述
目录结构

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/jquery-3.6.0.js"></script>
    <title>选项卡</title>
    <style>
        .li{
   
   
            margin-left: 30px;
        }
        .li:hover{
   
   
            cursor: pointer;
        }
        .info{
   
   
            margin: 20px;
        }

        .on{
   
   
            border-bottom: 1px solid black;
        }
    </style>
</head>

<body>
    <!--选项栏-->
    <ul style="list-style: none; display: flex;">
        <li class="li">人力资源部</li>
        <li class="li">开发部</li>
        <li class