Skip to content
This repository has been archived by the owner on Oct 18, 2024. It is now read-only.

Commit

Permalink
pref: optimize navigation bar
Browse files Browse the repository at this point in the history
  • Loading branch information
DeepChirp committed Nov 27, 2023
1 parent 110c664 commit 894b00c
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 41 deletions.
13 changes: 4 additions & 9 deletions frontend/class.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--移动端适配-->
<link rel="icon" href="favicon.svg"> <!--图标-->
<link rel="stylesheet" type="text/css" href="css/main.css"> <!--引入css文件-->
<script src="js/main.js"></script> <!--引入js文件-->
<script src="js/jquery-3.7.1.min.js"></script> <!--引入jquery文件-->
<!--顶端导航栏-->
<script>
$(function () {
$("#navbar").load("navbar.html");
});
</script>
<script src="js/main.js"></script> <!--引入js文件-->
</head>

<!--头部标签结束-->
Expand All @@ -25,8 +19,9 @@

<body>
<div id="navbar"></div>
<div class="container">

<div class="content">
<div class="container">
</div>
</div>
</body>

Expand Down
36 changes: 16 additions & 20 deletions frontend/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,8 @@
<meta name="author" content="罗文烨、李朝晖、沈志鸣"> <!--作者-->
<link rel="icon" href="favicon.svg"> <!--图标-->
<link rel="stylesheet" type="text/css" href="css/main.css"> <!--引入css文件-->
<script src="js/main.js"></script> <!--引入js文件-->
<script src="js/jquery-3.7.1.min.js"></script> <!--引入jquery文件-->
<!--顶端导航栏-->
<script>
$(function () {
$("#navbar").load("navbar.html");
});
</script>
<script src="js/main.js"></script> <!--引入js文件-->
</head>

<!--头部标签结束-->
Expand All @@ -28,20 +22,22 @@

<body>
<div id="navbar"></div>
<div class="container">
<div class="header">
<div class="title">
<h1>学生成绩分析</h1>
<div class="content">
<div class="container">
<div class="header">
<div class="title">
<h1>学生成绩分析</h1>
</div>
</div>
</div>
<div class="content">
<div class="content-left">
<div class="content-left-top">
<div class="content-left-top-title">
<h2>学生成绩分析</h2>
</div>
<div class="content-left-top-content">
<p>学生成绩分析是一个基于学生成绩的分析系统，可以对学生成绩进行分析，包括学生成绩的分布、学生成绩的排名、学生成绩的对比等等。</p>
<div class="content">
<div class="content-left">
<div class="content-left-top">
<div class="content-left-top-title">
<h2>学生成绩分析</h2>
</div>
<div class="content-left-top-content">
<p>学生成绩分析是一个基于学生成绩的分析系统，可以对学生成绩进行分析，包括学生成绩的分布、学生成绩的排名、学生成绩的对比等等。</p>
</div>
</div>
</div>
</div>
Expand Down
21 changes: 21 additions & 0 deletions frontend/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
// 顶端导航栏
$(function () {
$("#navbar").load("navbar.html", function () {
// 绑定导航栏按钮的点击事件
$('.navbar-button').click(function (e) {
e.preventDefault(); // 阻止默认的页面跳转行为

// 获取要加载的页面的 URL
var url = $(this).attr('href');

// 使用 AJAX 加载页面内容
$.get(url, function (data) {
// 将加载的内容插入到 .content 元素中
$('.content').html(data);
});

// 改变地址栏的 URL
history.pushState(null, null, url);
});
});
});
6 changes: 3 additions & 3 deletions frontend/navbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@

<div class="navbar">
<div class="nav-logo">
<a href="index.html"><img src="media/ico/logo.svg" alt="logo"></a>
<a href="index.html" class="navbar-button"><img src="media/ico/logo.svg" alt="logo"></a>
</div>
<div class="nav-item">
<a href="person.html">个人分析</a>
<a href="person.html" class="navbar-button">个人分析</a>
</div>
<div class="nav-item">
<a href="class.html">班级分析</a>
<a href="class.html" class="navbar-button">班级分析</a>
</div>
</div>
13 changes: 4 additions & 9 deletions frontend/person.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--移动端适配-->
<link rel="icon" href="favicon.svg"> <!--图标-->
<link rel="stylesheet" type="text/css" href="css/main.css"> <!--引入css文件-->
<script src="js/main.js"></script> <!--引入js文件-->
<script src="js/jquery-3.7.1.min.js"></script> <!--引入jquery文件-->
<!--顶端导航栏-->
<script>
$(function () {
$("#navbar").load("navbar.html");
});
</script>
<script src="js/main.js"></script> <!--引入js文件-->
</head>

<!--头部标签结束-->
Expand All @@ -25,8 +19,9 @@

<body>
<div id="navbar"></div>
<div class="container">

<div class="content">
<div class="container">
</div>
</div>
</body>

Expand Down

0 comments on commit 894b00c

Please sign in to comment.