这是我写一个html页面,我现在想要让右边刷新,导航栏不刷新。或者是整体刷新。
导航栏的代码:
<nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#my_homepage" aria-expanded="false"
aria-controls="my_homepage">
<i class="mdi mdi-account menu-icon"></i>
<span class="menu-title">我的首页</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="my_homepage">
<ul class="nav flex-column sub-menu">
<li class="nav-item">
<a class="nav-link" href="#">我的信息</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">银行公告</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">最新提醒</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">我的资产负债</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#my_account" aria-expanded="false"
aria-controls="my_account">
<i class="mdi mdi-account menu-icon"></i>
<span class="menu-title">我的账户</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="my_account">
<ul class="nav flex-column sub-menu">
<li class="nav-item">
<a class="nav-link" href="#">账户管理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">账户概览</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">交易明细查询</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">他行账户管理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">资金归集账户设置</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">资金归集管理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">资金明细查询</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#interbank_transfer" aria-expanded="false"
aria-controls="interbank_transfer">
<i class="mdi mdi-account menu-icon"></i>
<span class="menu-title">转账汇款</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="interbank_transfer">
<ul class="nav flex-column sub-menu">
<li class="nav-item">
<a class="nav-link" href="#">行内转账</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">注册账户互转</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">跨行转账</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">批量转账</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">批量转账查询</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">转账结果查询</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联行号查询</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#bill_payment " aria-expanded="false"
aria-controls="bill_payment">
<i class="mdi mdi-account menu-icon"></i>
<span class="menu-title">缴费支付</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="bill_payment">
<ul class="nav flex-column sub-menu">
<li class="nav-item">
<a class="nav-link" href="#">自助缴费</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">缴费查询</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">缴费设置</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">缴学费</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">缴学费查询</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">彩票站点缴费</a>
<a class="nav-link" href="#">体彩缴款</a>
<a class="nav-link" href="#">体彩缴款记录查询</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#personal_loans " aria-expanded="false"
aria-controls="personal_loans">
<i class="mdi mdi-account menu-icon"></i>
<span class="menu-title">个人贷款</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="personal_loans">
<ul class="nav flex-column sub-menu">
<li class="nav-item">
<a class="nav-link" href="#">个人贷款</a>
<a class="nav-link" href="#">个人贷款查询</a>
<a class="nav-link" href="#">小微贷查询</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">贷款试算</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">个贷产品展示</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">家园e贷</a>
<a class="nav-link" href="#">申请进度查询</a>
<a class="nav-link" href="#">贷款详情</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#credit_card " aria-expanded="false"
aria-controls="credit_card">
<i class="mdi mdi-account menu-icon"></i>
<span class="menu-title">信用卡</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="credit_card">
<ul class="nav flex-column sub-menu">
<li class="nav-item">
<a class="nav-link" href="#">申办与激活</a>
<a class="nav-link" href="#">卡片激活</a>
<a class="nav-link" href="#">办卡进度</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">账户管理</a>
<a class="nav-link" href="#">综合查询</a>
<a class="nav-link" href="#">资料修改</a>
<a class="nav-link" href="#">密码修改</a>
<a class="nav-link" href="#">信用卡挂失</a>
<a class="nav-link" href="#">信用卡补发</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">额度管理</a>
<a class="nav-link" href="#">额度查询</a>
<a class="nav-link" href="#">调额申请</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">账单查询</a>
<a class="nav-link" href="#">已出账单</a>
<a class="nav-link" href="#">未出账单</a>
<a class="nav-link" href="#">账单维护</a>
<a class="nav-link" href="#">授权历史交易查询</a>
<a class="nav-link" href="#">授权未入帐交易查询</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">信用卡还款</a>
<a class="nav-link" href="#">本行主动还款</a>
<a class="nav-link" href="#">本行约定还款</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">分期信贷</a>
<a class="nav-link" href="#">账单分期</a>
<a class="nav-link" href="#">消费分期</a>
<a class="nav-link" href="#">现金分期</a>
<a class="nav-link" href="#">预借现金</a>
<a class="nav-link" href="#">转账历史查询</a>
<a class="nav-link" href="#">分期查询</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">支付管理</a>
<a class="nav-link" href="#">网上支付设置</a>
<a class="nav-link" href="#">银联无密闪付</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">积分管理</a>
<a class="nav-link" href="#">积分查询</a>
<a class="nav-link" href="#">我的活动</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">增值保障</a>
<a class="nav-link" href="#">动账短信提醒设置</a>
<a class="nav-link" href="#">消费提示</a>
<a class="nav-link" href="#">用卡须知</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">随用金服务</a>
<a class="nav-link" href="#">透支转账</a>
<a class="nav-link" href="#">随意金汇总查询</a>
<a class="nav-link" href="#">随意金明细查询</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#financial_products " aria-expanded="false"
aria-controls="financial_products">
<i class="mdi mdi-account menu-icon"></i>
<span class="menu-title">理财产品</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="financial_products">
<ul class="nav flex-column sub-menu">
<li class="nav-item">
<a class="nav-link" href="#">产品超市</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">风险评估</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">持有理财产品</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">我的定投</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">在途交易</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">待兑付产品</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">交易明细查询</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">贵金属签约</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#my_savings " aria-expanded="false"
aria-controls="my_savings">
<i class="mdi mdi-account menu-icon"></i>
<span class="menu-title">我的储蓄</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="my_savings">
<ul class="nav flex-column sub-menu">
<li class="nav-item">
<a class="nav-link" href="#">定期互转</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">通知存款</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">智能通知存款</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">易得利</a>
<a class="nav-link" href="#">我的易得利</a>
<a class="nav-link" href="#">易得利签约/解约</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">月月息</a>
<a class="nav-link" href="#">月月息产品</a>
<a class="nav-link" href="#">我的月月息</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">特色储蓄</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">大额存单</a>
<a class="nav-link" href="#">大额存单产品</a>
<a class="nav-link" href="#">我的大额存单</a>
<a class="nav-link" href="#">我要转让</a>
<a class="nav-link" href="#">我的抓让</a>
<a class="nav-link" href="#">转让专区</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">活期盈</a>
<a class="nav-link" href="#">活期盈产品</a>
<a class="nav-link" href="#">我的活期盈</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#my_online_banking " aria-expanded="false"
aria-controls="my_online_banking">
<i class="mdi mdi-account menu-icon"></i>
<span class="menu-title">我的网银</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="my_online_banking">
<ul class="nav flex-column sub-menu">
<li class="nav-item">
<a class="nav-link" href="#">用户名设置</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">网银操作日志</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">短信签约查询</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">快捷菜单设置</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">收款人名册维护</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">缴费提醒设置</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#security_center " aria-expanded="false"
aria-controls="security_center">
<i class="mdi mdi-account menu-icon"></i>
<span class="menu-title">安全中心</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="security_center">
<ul class="nav flex-column sub-menu">
<li class="nav-item">
<a class="nav-link" href="#">安全设置</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">交易限额设置</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">手机银行限额签约</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">证书更新</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">账户安全锁</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
对应页面被注释包裹,然后替换上去的代码
脚本:
'use strict'
var gulp = require('gulp');
var requireDir = require('require-dir');
gulp.paths = {
dist: 'dist',
};
var paths = gulp.paths;
requireDir('gulp-tasks')
gulp.task('default', gulp.series('serve'));
做的尝试:
整体刷新:使用gulp inject的命令,我单独写了页头,导航栏,页脚的页面,每当我想要修改的时候,我就只修改单独的这些页面,然后执行gulp inject命令,然后gulp就会根据我页面中的特定注释包裹的地方替换掉对应的代码。
确实可以,不过会多出很多代码,冗余代码很多。但是我不知道这样做是否对页面性能有影响?是否应该使用iframe标签?
疑问就是:用iframe还是gulp?