锋芒神话霜 2019-07-19 14:13 采纳率: 50%
浏览 522
已结题

前端项目如何让每个新打开的窗口之间互不影响

RT,新到公司的实习生,要求修改一个项目,如下图片说明
原本的逻辑是我点击左边栏的发送记录只会在上面那一小栏里跳转,如果没有就加上,有的话就从其他的跳回去,而不是多出来一个,现在要求改为点击发送记录在navbar上能多出一个来,并且是最初始的状态,我弄好后点击虽然能多一个出来,但是再点前一个发送记录,再回来的话后面就和前面一样了这是我打开第一个,然后点击里面的详细记录
这是我刚打开第二个的时候,可以正常显示列表
图片说明
然后我先点了第一个,再回去,第二个就和第一个一样了
图片说明

,点击左边栏和上面其他navbar-item的代码奉上,救救我
下面这个是点击上面小方块的事件

activeTab: function () {// 点击选项卡菜单
        if (!$(this).hasClass('active')) {
            var currentId = $(this).data('id');
            // 显示tab对应的内容区
            $('.J_mainContent .J_iframe').each(function () {
                if ($(this).data('id') == currentId) {
                    $(this).show().siblings('.J_iframe').hide();
                    return false;
                }
            });
            $(this).addClass('active').siblings('.J_menuTab').removeClass('active');
            $navtabs.scrollToTab(this);
        }
    },

下面这个是点击左边边栏里的连接的事件,我把他原来的关于是否存在的语句给注释了,哪个onlyid是我自己定义的,想要用唯一自增的id来辨识,但不知道具体咋操作,暂时还没乱用

  menuItem: function () {
        // 获取标识数据
        var dataUrl = $(this).attr('href'),
            dataIndex = $(this).data('index'),
            menuName = $.trim($(this).text()),
            flag = true;

        if (dataUrl == undefined || $.trim(dataUrl).length == 0) {
            return false;
        }
        // 选项卡菜单已存在
       /* $('.J_menuTab').each(function () {
            if ($(this).data('id') == dataUrl) {
                if (!$(this).hasClass('active')) {
                    $(this).addClass('active').siblings('.J_menuTab').removeClass('active');
                    $navtabs.scrollToTab(this);
                    // 显示tab对应的内容区
                    $('.J_mainContent .J_iframe').each(function () {
                        if ($(this).data('id') == dataUrl) {
                            $(this).show().siblings('.J_iframe').hide();
                            return false;
                        }
                    });
                }
                flag = false;
                return false;
            }
        });*/

        // 选项卡菜单不存在
        if (flag) {
            var str = '<a href="javascript:;" class="active J_menuTab" onlyid="' + onlyid +'" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
            $('.J_menuTab').removeClass('active');
            onlyid++;

            // 添加选项卡对应的iframe
            var str1 = '<iframe class="J_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
            $('.J_mainContent').find('iframe.J_iframe').hide().parents('.J_mainContent').append(str1);

            //显示loading提示
//            var loading = layer.load();
//
//            $('.J_mainContent iframe:visible').load(function () {
//                //iframe加载完成后隐藏loading提示
//                layer.close(loading);
//            });
            // 添加选项卡
            $('.J_menuTabs .page-tabs-content').append(str);

            $navtabs.scrollToTab($('.J_menuTab.active'));
        }
        return false;
    },
  • 写回答

2条回答 默认 最新

  • doncha 2019-07-19 15:41
    关注

    我估计啊,你这里的原因是因为,你在点击左边菜单栏的时候,不是会传过去这个菜单的url和id吗,然后新建一个iframe,iframe的路径为菜单的url,name为菜单的id。可能是因为id和url相同,所有导致两个标签页指向的是同一个iframe

    评论

报告相同问题?

悬赏问题

  • ¥15 聚类分析或者python进行数据分析
  • ¥15 如何用visual studio code实现html页面
  • ¥15 逻辑谓词和消解原理的运用
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js,页面2返回页面1时定位进入的设备
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗?