基于JS实现单页面右侧分页

最新推荐文章于 2023-07-25 11:02:12 发布

槑哦

最新推荐文章于 2023-07-25 11:02:12 发布

阅读量222

点赞数 1

文章标签： js javascript html5 css

本文链接：https://blog.csdn.net/weixin_44289052/article/details/111786928

版权

JS–页面分页简单实现

1、问题描述

用js实现一个管理页面的单页面跳转，大致内容如下图：
在这里插入图片描述
点击左侧的选项，右侧主体跳转为相对应的内容，主题方出现可选择的导航块，点击也可以切换，点击‘X’则关闭当前内容

2、点击显示对应主体

先将需要的主体写出来，给没个主体的display设置为none；给左侧的选项，绑定一个点击事件。每个点击事件与每个主体一一对应：

 <ul>
        <li onclick="change(1)" id="l1"><a href="javascript:void(0)">商品管理</a></li>
         <li onclick="change(2)" id="l2"><a href="javascript:void(0)">分类管理</a></li>
         <li onclick="change(3)" id="l3"><a href="javascript:void(0)">订单管理</a></li>
         <li onclick="change(4)" id="l4"><a href="javascript:void(0)">会员管理</a></li>
         <li onclick="change(5)" id="l5"><a href="javascript:void(0)">系统管理</a></li>
</ul>

<div class="main">
         <div id="theme1" style="display: none">商品管理</div>
         <div id="theme2" style="display: none">分类管理</div>
         <div id="theme3" style="display: none">订单管理</div>
         <div id="theme4" style="display: none">会员管理</div>
         <div id="theme5" style="display: none">系统管理</div>
</div>

当点击选项时，就会传入响应的值，根据此值去找对应的div主体，将被点击的display设置为block，之前的div则设为none:

var num = 1;
        var arr = [];
        var all = 0;
        function change(n) {
            all = n;
            //将变化之前的div的display设置为none
            document.getElementById('theme'+num).style.display = 'none';
            document.getElementById('l'+num).style.border=''

            //当前按钮所对应的div样式设置为block
            document.getElementById('theme'+n).style.display = 'block';
            document.getElementById('l'+n).style.borderTop = '2px solid #000'
            document.getElementById('l'+n).style.borderLeft = '2px solid #000'
            //设置num为当前元素
            num = n;
            }

3、点击添加导航条

当点击左侧选项的时候，如果此元素不存在，则创建一个div元素，并用innerHtML去设置他的内容，最后将此元素所对应的编号存入数组中；若当前点击所对应的选项存在时，则只需重新设置样式即可。

  //如果数组中没有当前点击的元素，则创建一个新div，并将此div所对应的编号存入arr
                if (arr.indexOf(n)<0) {
                    let nav_div = document.createElement('div');
                     document.getElementById('top').appendChild(nav_div);
                     nav_div.id = `s${n}`;
                    //设置nav_div的内容
                    nav_div.innerHTML = `<span οnclick="change(${n})"><a href="javascript:void(0)">
                                               ${document.getElementById('theme'+n).innerText}</a>
                                        </span>
                                      <span style="cursor: pointer" id="remove${n}" οnclick="remove(${n})">x</span>`;
                     //向数组中存入他的编号
                     arr.push(n);
                }
                // 判断前一个元素是否被删除
                    if (arr.indexOf(num)>-1) {
                        document.getElementById('s'+num).style.borderRadius = '';
                    }
                    document.getElementById('s'+n).style.borderRadius = '40%';

4、删除导航块

当点击删除按钮时，触发相对应的事件

 <span style="cursor: pointer" id="remove${n}" onclick="remove(${n})">x</span>

判断删除的元素是否是当前所选中的或者是最后一个，如果不是则只需删除整个div标签即可；否则，在判断删除的元素，是否为最末尾的元素。是，则在删除后，将展示内容前移一位；否，则后移一位。

//点击‘X’删除 标签，并将选中移动
        function remove(r){
            //删除当前选中元素
            document.getElementById('s'+r).remove();

            let index = arr.indexOf(r);
            let last = arr[arr.length-1]
            //将数组中存储的编号删除
            let remove = arr.splice(index,1);

            //判断要删除的元素是否为当前选中的元素
            if(all == r&&arr.length>0){
                // 如果删除的元素，是最后一个，则向前移动一位
                if (remove[0] == last) {
                    change(arr[arr.length - 1]);
                }else{
                    //不是，则向后移动一位
                    change(arr[index]);
                }
            }else{
                //如果删除的元素是最后一个，直接清空当前页面
                document.getElementById('l'+r).style.border=''
                document.getElementById('theme'+r).style.display = 'none';
            }
        }

5、具体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="System.css" rel="stylesheet">
</head>
<body>
    <div class="content">
        <div class="left">
            <ul>
                <li onclick="change(1)" id="l1"><a href="javascript:void(0)">商品管理</a></li>
                <li onclick="change(2)" id="l2"><a href="javascript:void(0)">分类管理</a></li>
                <li onclick="change(3)" id="l3"><a href="javascript:void(0)">订单管理</a></li>
                <li onclick="change(4)" id="l4"><a href="javascript:void(0)">会员管理</a></li>
                <li onclick="change(5)" id="l5"><a href="javascript:void(0)">系统管理</a></li>
            </ul>
        </div>
        <div class="right">
            <div id="top"></div>
            <div class="main">
                <div id="theme1" style="display: none">商品管理</div>
                <div id="theme2" style="display: none">分类管理</div>
                <div id="theme3" style="display: none">订单管理</div>
                <div id="theme4" style="display: none">会员管理</div>
                <div id="theme5" style="display: none">系统管理</div>
            </div>
        </div>
    </div>

    <script>
        var num = 1;
        var arr = [];
        var all = 0;
        function change(n) {
            all = n;
            //将变化之前的div的display设置为none
            document.getElementById('theme'+num).style.display = 'none';
            document.getElementById('l'+num).style.border=''

            //当前按钮所对应的div样式设置为block
            document.getElementById('theme'+n).style.display = 'block';
            document.getElementById('l'+n).style.borderTop = '2px solid #000'
            document.getElementById('l'+n).style.borderLeft = '2px solid #000'

                //如果数组中没有当前点击的元素，则创建一个新div，并将此div所对应的编号存入arr
                if (arr.indexOf(n)<0) {
                    let nav_div = document.createElement('div');
                     document.getElementById('top').appendChild(nav_div);
                     nav_div.id = `s${n}`;
                    //设置nav_div的内容
                    nav_div.innerHTML = `<span οnclick="change(${n})"><a href="javascript:void(0)">
                                               ${document.getElementById('theme'+n).innerText}</a>
                                        </span>
                                      <span style="cursor: pointer" id="remove${n}" οnclick="remove(${n})">x</span>`;
                     //向数组中存入他的编号
                     arr.push(n);
                }
                // 判断前一个元素是否被删除
                    if (arr.indexOf(num)>-1) {
                        document.getElementById('s'+num).style.borderRadius = '';
                    }
                    document.getElementById('s'+n).style.borderRadius = '40%';
            //设置num为当前元素
            num = n;
        }

        //点击‘X’删除 标签，并将选中移动
        function remove(r){
            //删除当前选中元素
            document.getElementById('s'+r).remove();

            let index = arr.indexOf(r);
            let last = arr[arr.length-1]
            //将数组中存储的编号删除
            let remove = arr.splice(index,1);

            //判断要删除的元素是否为当前选中的元素
            if(all == r&&arr.length>0){
                // 如果删除的元素，是最后一个，则向前移动一位
                if (remove[0] == last) {
                    change(arr[arr.length - 1]);
                }else{
                    //不是，则向后移动一位
                    change(arr[index]);
                }
            }else{
                //如果删除的元素是最后一个，直接清空当前页面
                document.getElementById('l'+r).style.border=''
                document.getElementById('theme'+r).style.display = 'none';
            }
        }
        //默认执行一次
        change(1);
    </script>
</body>
</html>

槑哦

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
基于JS实现单页面右侧分页

JS–页面分页简单实现1、问题描述用js实现一个管理页面的单页面跳转，大致内容如下图：点击左侧的选项，右侧主体跳转为相对应的内容，主题方出现可选择的导航块，点击也可以切换，点击‘X’则关闭当前内容2、点击显示对应主体先将需要的主体写出来，给没个主体的display设置为none；给左侧的选项，绑定一个点击事件。每个点击事件与每个主体一一对应： <ul> <li onclick="change(1)" id="l1"><a href="javas
复制链接

扫一扫