刘杰瑞 2021-09-02 17:16 采纳率: 90.9%
浏览 34
已结题

asp.net webform 如何实现网页中类似网页功能？

img
如图，现在主要的问题是右面窗口上面的标签怎么实现的？

  • 写回答

1条回答 默认 最新

  • Yijing Sun 2021-09-03 10:51
    关注

    您好,
    请问您是否想要点击左侧在右侧显示tab内容?
    如果您想要这个,您可以参考以下代码:
    Html 代码:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><?php echo $curTitle;?></title>
    <link rel="stylesheet" href="js/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">XXXX业务管理平台</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                欢迎光临，商户001
            </li>
            <li class="layui-nav-item"><a href="">安全退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧垂直导航区域-->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">管理员管理</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;" data-id="1" data-title="管理员列表" data-url="index.php?&a=adminList"
                               class="site-demo-active" data-type="tabAdd">管理员列表</a></dd>
                        <dd><a href="javascript:;" data-id="2" data-title="管理员日志" data-url="index.php?&a=adminLogList"
                               class="site-demo-active" data-type="tabAdd">管理员日志</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">交易管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-id="" data-id="3" data-title="存款列表"
                               　data-url="index.php?&a=adminList" class="site-demo-active" data-type="tabAdd">存款列表</a>
                        </dd>
                        <dd><a href="javascript:;">代付列表</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">系统管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">支付API设置</a></dd>
                        <dd><a href="javascript:;">公告设置</a></dd>
                        <dd><a href="javascript:;">控制台</a></dd>
                </li>
            </ul>
        </div>
    </div>

    <!--tab标签-->
    <div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
        <ul class="layui-tab-title"></ul>
        <div class="layui-tab-content"></div>
    </div>

<div class="layui-footer" style="text-align:center;">
    <!-- 底部固定区域 -->
    © sunway.tk XXXX业务管理平台
</div>
</div>
<script src="/js/layui/layui.js"></script>
<script>
<!--这里是放置js代码区域-->
</script>
</body>
</html>

    JS代码:

    layui.use(['element', 'layer', 'jquery'], function () {
        var element = layui.element;
        // var layer = layui.layer;
        var $ = layui.$;
        // 配置tab实践在下面无法获取到菜单元素
        $('.site-demo-active').on('click', function () {
            var dataid = $(this);
            //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                //如果比零小，则直接打开新的tab项
                active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
            } else {
                //否则判断该tab项是否以及存在
                var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                $.each($(".layui-tab-title li[lay-id]"), function () {
                    //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                        isData = true;
                    }
                })
                if (isData == false) {
                    //标志为false 新增一个tab项
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                }
            }
            //最后不管是否新增tab，最后都转到要打开的选项页面上
            active.tabChange(dataid.attr("data-id"));
        });

        var active = {
            //在这里给active绑定几项事件，后面可通过active调用这些事件
            tabAdd: function (url, id, name) {
                //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                element.tabAdd('demo', {
                    title: name,
                    content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99%;"></iframe>',
                    id: id //规定好的id
                })
                FrameWH();  //计算ifram层的大小
            },
            tabChange: function (id) {
                //切换到指定Tab项
                element.tabChange('demo', id); //根据传入的id传入到指定的tab项
            },
            tabDelete: function (id) {
                element.tabDelete("demo", id);//删除
            }
        };
        function FrameWH() {
            var h = $(window).height();
            $("iframe").css("height",h+"px");
        }
    });
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

  • asp.net webform 如何实现网页中类似网页功能？ asp.net c#
    2021-09-02 17:16
    回答 1 已采纳 您好,请问您是否想要点击左侧在右侧显示tab内容?如果您想要这个,您可以参考以下代码:Html 代码: <!DOCTYPE html> <html lang="en"> &lt
  • asp.net webform 如何做一个能判断管理员权限的登录？界面 asp.net c# sqlserver
    2021-09-04 23:19
    回答 2 已采纳 您好，首先请问您这个项目是在本地运行仅为您个人使用还是需要连接到网站给全国人民的用户是使用的？如果您是个人使用，那么有一个解决办法：在创建数据库表的时候添加一列身份认证，标记该用户是管理员或是非管理员
  • asp.net webform gridview控件实时显示数据库数据 asp.net c#
    2021-09-14 20:37
    回答 1 已采纳 您好，一般gridview 绑定数据库之后，一旦数据库更新，你只需要刷新页面 gridview 的表也会更新的。
  • asp.net webform冻结列 冻结表头 复杂表头
    2023-07-04 11:06
    "asp.net webform冻结列 冻结表头 复杂表头"这个标题描述了这样一个需求：在ASP.NET WebForm应用中实现表格的冻结功能，包括复杂表头的处理。 在ASP.NET WebForm中实现冻结列和表头，通常涉及到以下技术点： 1. **...
  • asp.net webform 的一个功能 asp.net c#
    2022-01-10 11:31
    回答 3 已采纳 现在都.NET 6时代了，不建议再使用Webform做开发。 单从你的问题上来说，可以使用Ajax请求后端接口，实现页面局部刷新的效果。
  • asp.net webform中事件调用JavaScript脚本 asp.net c# javascript
    2022-05-31 21:23
    回答 2 已采纳 你好，你可以用asp.net Ajax progress bar 来显示进度。 <div> <asp:ScriptManager ID="ScriptManager1
  • Asp.net webform中 GridView编辑功能，能否将编辑时的textbox换成dropdownlist asp.net c#
    2021-10-12 10:16
    回答 1 已采纳 您好, 3.编辑功能应该是在C#中写吧，那dropdownlist的value怎么设置。 可以把textbox 改成dropdownlist. 你可以查询dateset 的值,然后设置dropdo
  • 带有ASP.NET WebForm和BootStrap的SignalR聊天应用程序-第三部分
    2021-04-11 07:55
    这篇文章将深入探讨如何构建一个实时的聊天应用程序，利用ASP.NET WebForms技术和Bootstrap框架，同时结合SignalR库来实现即时通讯功能。在这一部分中，我们将重点关注如何添加表情符号、笑脸以及文件附件功能，这些...
  • ASP.net webform Gridview可以做一个插入行吗？ asp.net c# css
    2021-09-09 21:31
    回答 1 已采纳 您好, 能用c#为他写一个插入的功能吗？ 你可以参照以下代码:首先你需要写一个gridview. <asp:gridview ID="Gridview1" runat="server" Sh
  • asp.net webform ajax 与 ispostback asp.net c#
    2022-01-11 09:01
    回答 2 已采纳 你好, 最终效果就是想，点击 button 调用ajax申请后端数据，然后不想让ispostback等于false。 我不是很懂你的意思.你想让Ispostback 一直等于true,表示它不适用
  • Asp.Net WebForm 中使用 dynamic类型报错，是为什么呐？ asp.net
    2017-02-09 05:44
    回答 2 已采纳 ![图片说明](https://img-ask.csdn.net/upload/201702/16/1487176419_784768.jpg)
  • asp.net webform自定义分页控件
    2020-10-20 18:36
    *** WebForms是微软.NET框架中用于构建动态网页的模型，尽管*** MVC现在更受推崇，但在一些旧的项目或特定场景中WebForms仍然被广泛使用。在Web应用开发过程中，分页功能几乎是必不可少的，为了方便开发者实现分页...
  • 新建的asp.net webform工程不能运行 asp.net
    2018-03-29 00:55
    回答 2 已采纳 这种问题好像没什么意义，你直接删除掉，重新建一个看看。
  • asp.net webform 注册登录Demo
    2018-02-23 16:15
    这个"asp.net webform 注册登录Demo"是一个实例项目，旨在帮助开发者理解如何在ASP.NET Web Form环境中实现用户注册和登录功能。这个项目是在Windows 10操作系统上使用Visual Studio 2015（VS2015）开发的，并且...
  • asp.net 4.0+ webform程序中集成mvc4
    2020-10-21 11:32
    *** 是一个由微软开发的Web应用程序框架，它允许程序员使用.NET框架来构建动态网页、Web应用程序和Web服务。*** Web Forms是***的一种编程模型，它提供了一种快速建立Web应用程序的方法。MVC（Model-View-Controller...
  • 18个ASP.NET WebForm项目源码
    2018-08-19 08:58
    ASP.NET WebForm是微软开发的一款用于构建Web应用程序的框架，它是.NET Framework的重要组成部分。这个压缩包包含18个ASP.NET WebForm项目的源码，对于学习和理解WebForm的工作原理、开发流程以及数据库交互等方面...
  • 学生选课成绩管理系统（asp.net webForm 源码）
    2021-05-31 11:47
    《学生选课成绩管理系统——基于ASP.NET WebForm的实现》 在信息技术日益发达的今天，教育领域的信息化管理已经成为提升教学效率的重要手段。本系统——“学生选课成绩管理系统”，是基于ASP.NET WebForm技术开发的...
  • asp.net 人事管理系统(源码+数据库+webform).rar
    2021-12-24 09:27
    【标题】：“asp.net 人事管理系统(源码+数据库+webform)”是一个基于ASP.NET技术开发的人力资源管理系统的完整实现，包含了源代码、数据库文件以及Web表单界面。这个项目可能是一个教学示例或者小型企业的实际应用...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 9月11日
  • 已采纳回答 9月3日
  • 创建了问题 9月2日

悬赏问题

  • ¥15 根据会员信息表绘制堆积柱状图
  • ¥100 华为手机私有App后台保活
  • ¥20 有谁能看看我coe文件到底哪儿有问题吗？
  • ¥20 我的这个coe文件到底哪儿出问题了
  • ¥15 matlab使用自定义函数时一直报错输入参数过多
  • ¥15 设计一个温度闭环控制系统
  • ¥100 rtmpose姿态评估
  • ¥15 java 通过反射找路径下的类，打包后就找不到
  • ¥15 通联支付网上收银统一下单接口
  • ¥15 angular有偿编写，