js 简单的页面导航

最新推荐文章于 2024-07-20 23:54:17 发布

.星空.

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量361

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_72759446/article/details/132389080

版权

实现效果：

实现原理：

实现原理是通过创建数组里面包含对应页面的信息，当点击的时候为数组传递一个对象，里面包含要显示的信息。

跳转链接实现原理：

通过创建一个数组，里面包含所有可以跳转的页面链接名称，为所有的菜单绑定对应跳转的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()
        }
    }
}