文章摘要
这篇文章主要介绍了一个用户会员中心页面的HTML结构和功能实现。页面使用了Bootstrap类和自定义的NProgress、jQuery等库来展示进度条和动态加载效果。核心内容包括页面布局、AJAX事件处理、JavaScript脚本功能以及个人资料展示。通过点击个人信息中的各个链接，用户可以跳转到不同页面查看相关内容，而 Work 和 Hobby 界面会阻止跳转。整体展示了网页的前端结构和动态交互功能。
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<title>主页面</title>
<link rel=”stylesheet” href=”https://www.jb51.net/article/bootstrap.min.css” >
<link rel=”stylesheet” href=”https://www.jb51.net/nprogress.css” >
<script src=”https://www.jb51.net/nprogress.js”></script>
</head>
<body>
<div class=”container pt-4″>
<h1>会员中心</h1>
<hr>
<div class=”row”>
<aside class=”col-md-3″>
<div class=”list-group”>
<a class=”list-group-item list-group-item-action” href=”https://www.jb51.net/article/index.html” >个人信息</a>
<a class=”list-group-item list-group-item-action” href=”https://www.jb51.net/article/work.html” >工作经验</a>
<a class=”list-group-item list-group-item-action” href=”https://www.jb51.net/article/hobbit.html” >兴趣爱好</a>
</div>
</aside>
<main id=”main” class=”col-md-9″>
<h2>这是我的个人信息界面</h2>
<hr>
</main>
</div>
</div>
<script src=”https://www.jb51.net/jquery-3.4.1.js”></script>
<script>
$(function ($) {
// 入口函数带参数$,原因是有一个独立的作用域，顺便确保页面加载完成执行
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<title>主页面</title>
<link rel=”stylesheet” href=”https://www.jb51.net/article/bootstrap.min.css” >
<link rel=”stylesheet” href=”https://www.jb51.net/nprogress.css” >
<script src=”https://www.jb51.net/nprogress.js”></script>
</head>
<body>
<div class=”container pt-4″>
<h1>会员中心</h1>
<hr>
<div class=”row”>
<aside class=”col-md-3″>
<div class=”list-group”>
<a class=”list-group-item list-group-item-action” href=”https://www.jb51.net/article/index.html” >个人信息</a>
<a class=”list-group-item list-group-item-action” href=”https://www.jb51.net/article/work.html” >工作经验</a>
<a class=”list-group-item list-group-item-action” href=”https://www.jb51.net/article/hobbit.html” >兴趣爱好</a>
</div>
</aside>
<main id=”main” class=”col-md-9″>
<h2>这是我的个人信息界面</h2>
<hr>
</main>
</div>
</div>
<script src=”https://www.jb51.net/jquery-3.4.1.js”></script>
<script>
$(function ($) {
// 入口函数带参数$,原因是有一个独立的作用域，顺便确保页面加载完成执行
//全局AJAX事件处理
$(document)
.ajaxStart(function () {
NProgress.start()
})
.ajaxStop(function () {
NProgress.done()
});
$(‘.list-group-item’).on(‘click’, function () {
var url=$(this).attr(‘href’)
//后面的 #main 指的是载入页面的 id
$(‘#main’).load(url + ‘ #main > *’)
//列表组中是 a 标签，禁止它跳转到相应界面
return false
})
})
</script>
</body>
</html>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
