实现效果：
实现原理：
实现原理是通过创建数组里面包含对应页面的信息，当点击的时候为数组传递一个对象，里面包含要显示的信息。
跳转链接实现原理：
通过创建一个数组，里面包含所有可以跳转的页面链接名称，为所有的菜单绑定对应跳转的class名点击判断链接数组存在的话，就进行跳转。
html部分：
<!-- 框架 -->
<div class="nav">
<!-- 左 -->
<div class="left">
<!-- loge -->
<div class="loge">
<div>
<img src="img/ia_100000000.png" alt="">
<p>企业家联合会</p>
</div>
</div>
<!-- 菜单部分 -->
<div class="menus">
<div class="menus_list">
<div class="title">
<!-- 一级菜单 -->
<div class="title_centent" style="background-color: #409eff;">
<img src="img/touxiang.png" alt="">
<span>首页</span>
</div>
<div class="title_select">
<p>></p>
</div>
</div>
<!-- 二级菜单 -->
<div class="menus_children">
<div>
<img src="img/touxiang.png" alt="">
<span>首页</span>
</div>
</div>
</div>
</div>
</div>
<!-- 右 -->
<div class="right">
<div class="right_a">
<div class="right_a_left">
<div>
<img src="./img/展开(黑).png" alt="">
</div>
<div>
<img src="./img/首页(黑).png" alt="">
<p>首页</p>
</div>
</div>
<div class="right_a_right">
<div></div>
<div class="full_screen"><img src="./img/全屏.png" alt=""></div>
<div><img src="./img/刷新.png" alt="" onclick="refresh()"></div>
<div><img src="./img/ia_100000001.gif" alt=""></div>
</div>
</div>
<hr></hr>
<div class="right_b">
<div style="display: flex;" class="right_kk">
</div>
</div>
<div class="right_c">
<iframe src="index.html" frameborder="0"></iframe>
</div>
</div>
</div>
</div>js部分：
let link = ['account', 'agree', 'index', 'industry','goods'];
render()
function render() {
let str = '';
if (log_in != '') {
for (let i = 0; i < log_in.roles.length; i++) {
if (log_in.roles[i].children == '') {
let kkk = {
title: log_in.roles[i].meta.title,
link: log_in.roles[i].name
}
str += `
<div class="menus_list" onclick = fn(${JSON.stringify(kkk)}) id="${log_in.roles[i].name}">
<div class="title">
<!-- 一级菜单 -->
<div class="title_centent">
<img src="${img[i]}" alt="">
<span>${log_in.roles[i].meta.title}</span>
</div>
<div class="title_select">
</div>
</div>
</div>
<div class="menus_children">
</div>
`
} else {
str += `
<div class="menus_list">
<div class="title">
<!-- 一级菜单 -->
<div class="title_centent">
<img src="${img[i]}" alt="">
<span>${log_in.roles[i].meta.title}</span>
</div>
<div class="title_select">
</div>
</div>
</div>
<div class="menus_children">
</div>
`
}
}
}
$('.menus').html(str);
}
// 二级列表渲染
Secondary_list()
function Secondary_list() {
let subset = '';
let arrows = '';
for (let i = 0; i < log_in.roles.length; i++) {
if (log_in.roles[i].children != '') {
arrows = ' <p>></p>'
for (let k = 0; k < log_in.roles[i].children.length; k++) {
let kkk = {
title: log_in.roles[i].children[k].meta.title,
link: log_in.roles[i].children[k].name
}
subset += `<div onclick=fn(${JSON.stringify(kkk)}) id="${log_in.roles[i].children[k].name}" class="link_a">
<img src="${imgs[i][k]}" alt="">
<span>${log_in.roles[i].children[k].meta.title}</span>
</div>`
}
$('.menus_children').eq(i).html(subset);
$('.title_select').eq(i).html(arrows);
subset = '';
}
}
$('.menus_list').eq(0).css('background-color', '#409eff');
}
// 菜单列表展开隐藏
$('.menus_list').on('click', function () {
let num = $('.menus_list').index(this);
$('.menus_children').eq(num).toggle();
console.log($('.title_select p').eq(num));
})
//本地存储一个首页的默认值
sessionStorage.setItem('名称', 'index');
// 面包屑渲染数组
let arr = [
{
title: '首页',
link: 'index'
}
];
// 点击函数
function fn(k) {
sessionStorage.setItem('名称', k.link);
$('.menus_list').eq(0).css('background-color', '');
for (let i = 0; i < link.length; i++) {
if (link[i] == k.link) {
$('.right_c iframe').attr('src', k.link + '.html')
}
}
if (arr == '' || arr == null) {
if (k.title != '首页') {
arr.push(k);
xuanran()
}
} else {
// 判断数组中是否存在此对象
if (!arr.some(item => item.title === k.title)) {
// 将对象添加到数组中
if (k.title != '首页') {
arr.push(k);
}
}
xuanran()
}
}
// 面包屑渲染
xuanran()
function xuanran() {
let pitch_on = sessionStorage.getItem('名称');
let str = '';
let a = $('.right_c iframe').attr('src').split('.')[0];
for (let i = 0; i < arr.length; i++) {
if (arr[i].title != '首页') {
if (arr.length > 0) {
if (arr[i].link == pitch_on) {
str += `
<div class="${a == pitch_on ? 'right_kk_a' : ''}">
<p onclick = redirect(${JSON.stringify(arr[i])})>${arr[i].title}</p>
<span onclick = close_a(${JSON.stringify(arr[i])},${i})>x</span>
</div>
`
} else {
str += `
<div>
<p onclick = redirect(${JSON.stringify(arr[i])})>${arr[i].title}</p>
<span onclick = close_a(${JSON.stringify(arr[i])},${i}) class="shanchu">x</span>
</div>
`
}
}
} else {
str += `
<div style="background-color: ${pitch_on == $('.menus_list').eq(0).attr('id') ? ' rgba(236, 245, 255)' : ''}; color:${pitch_on == $('.menus_list').eq(0).attr('id') ? 'rgba(80, 166, 255);' : ''};border-bottom:${pitch_on == $('.menus_list').eq(0).attr('id') ? ' 1.5px solid blue;' : ''}">
<p onclick = redirect(${JSON.stringify(arr[i])})>${arr[i].title}</p>
</div>
`
}
}
// 左侧栏渲染
for (let i = 0; i < $('.link_a').length; i++) {
if ($('.link_a').eq(i).attr('id')) {
if ($('.link_a').eq(i).attr('id') == pitch_on) {
$('.menus_list').css('background-color', '');
$('.link_a').css('background-color', '');
$('.link_a').eq(i).css('background-color', '#409eff');
}
}
}
for (let i = 0; i < $('.menus_list').length; i++) {
if ($('.menus_list').eq(i).attr('id')) {
if ($('.menus_list').eq(i).attr('id') == pitch_on) {
$('.menus_list').css('background-color', '');
$('.link_a').css('background-color', '');
$('.menus_list').eq(i).css('background-color', '#409eff');
}
}
}
$('.right_kk').html(str)
}
// 跳转链接
function redirect(a) {
// // 添加id使对应点击的标签颜色改变
// console.log($('.menus_list .title_centent span').html());
sessionStorage.setItem('名称', a.link);
for (let i = 0; i < link.length; i++) {
if (link[i] == a.link) {
$('.right_c iframe').attr('src', a.link + '.html')
}
}
xuanran()
}
// 删除功能
function close_a(a, i) {
let pitch_on = sessionStorage.getItem('名称');
if (arr != '') {
if (arr[i].link == pitch_on) {
console.log(arr[i].link);
arr.splice(i, 1);
if (arr.length > 0) {
sessionStorage.setItem('名称', arr[arr.length - 1].link);
$('.right_c iframe').attr('src', arr[arr.length - 1].link + '.html');
} else {
sessionStorage.setItem('名称', 'index');
$('.right_c iframe').attr('src', 'index.html');
}
xuanran()
} else {
arr.splice(i, 1);
xuanran()
}
}
}
