bootstrap选项卡页面中如何关闭当前选项卡及页面

摘要:
然后使用nowTab。remove()以实现第二步。3) 激活上一个选项卡以获取上一个标签的方法非常简单。我们在上一步中获得了此选项卡。此时,我们只需要nowTab。prev()获取上一个选项卡。如何激活它?

再具体说一下现在的需求:

bootstrap选项卡页面中如何关闭当前选项卡及页面第1张

 如上界面:在新闻发布界面有一个按钮,在点击按钮的时候我需要直接把这个打开的选项卡关闭

实现思路:

1)关闭选项卡对应的页面     2)去除上方选项卡      3)激活前一个选项卡

1)关闭选项卡对应的界面:

使用jquery我们很容易想到window.close()关闭当前界面,但是此时浏览器报了警告提示:

Scripts may close only the windows that were opened by it

而且也并没有能够关闭我想关闭的界面,百度之后有三种方案:

(1) 

  window.open('','_self','');

  window.close();

(2)

  open(location, '_self').close();

这两种我都试过了,还是一样有警告信息,并且无法关闭窗口。

最后这个有用的方案:

window.location.href="about:blank";
window.close();

终于能够关闭界面了,第一步实现了。

2)去除上方选项卡 

这一步也涉及到一个问题,就是我在选项卡里面的这个界面如何能够获取到这个选项卡呢

我们都知道,选项卡点击之后,会显示出对应的iframe,而我们现在能操作的界面就是这个iframe里面显示的界面

所以我们需要在当前页面的父页面,也就是iframe所在的页面中获取我们需要的选项卡元素:

var nowTab = $("#admui-siteConTabs > div.contabs-scroll.float-left > ul > li.active", parent.document);

通过jquery中的选择器,我们在后面加了parent.document参数,这样就是在父页面中进行元素的选择。

然后使用nowTab.remove()就可以实现第二步了

3)激活前一个选项卡

获取到前一个选项卡的方法很简单,我们上一步已经获取到了这个选项卡,此时只需要nowTab.prev()就可以获取到前一个选项卡了

如何进行激活呢?我们分析一下元素构成:

bootstrap选项卡页面中如何关闭当前选项卡及页面第2张

 可以看到,每一个选项卡对应一个li标签,这个标签下方有一个a标签,我们只要激活这个a标签就可以了

获取到a标签:

nowTab.prev().find('a')

激活的时候还有一个坑,就是jquery和原生js激活a标签是不一样的:

$("#id").click()这种方法并不能实现a标签的点击事件

原生js不受限制,直接document.getElementById("id").click();

我们这里没法使用document.getElementById函数,所以需要用jquery函数

只需要将jquery对象转换成DOM对象就可以了,实现也很简单:

$("#id")[0].click()

没错,取到对象中的第一个元素就是DOM对象,所以我们现在需要使用

nowTab.prev().find('a')[0].click()

这样第三步也实现了。

最后把比较完整的代码放进来:

if ($.trim($("#title").val()) == "" && $.trim(getContent()) == "") {    // 还未输入内容
  var nowTab = $("#admui-siteConTabs > div.contabs-scroll.float-left > ul > li.active", parent.document);
  window.location.href="about:blank";
  window.close();
  nowTab.prev().find('a')[0].click();
  nowTab.remove();
} else {
  ....
}

如果觉得有用就帮忙推荐一下吧。

此博客为博主原创,转载请注明出处:https://www.cnblogs.com/guo-xu/p/12064088.html

免责声明:文章转载自《bootstrap选项卡页面中如何关闭当前选项卡及页面》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Yii框架常见问题汇总bmp24位彩色图像转8位灰度图像(纯C++)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

WindowsTerminal设置

参考:https://www.cnblogs.com/6b7b5fc3/p/14019253.html  注明出处 本文在上面教程的基础上,描述遇到问题以及解决。 Windows 终端是一个面向命令行工具和 shell(如命令提示符、PowerShell 和适用于 Linux 的 Windows 子系统 (WSL))用户的新式终端应用程序。 它的主要功能包...

ElementUI分页Pagination自动到第一页

当数据量过多时,使用分页请求数据。 设置分页的页数自动回到第一页。 例: <div class="pagination"> <el-pagination background layout="prev, pager, next" :current-page.sync="current...

C#-将控件动态添加到选项卡页tablepage

tabPage1.Controls.Add(new Button()); 实例: Button cp = new Button(); cp.text="test";cp.Click += Ckick1;p1.Controls.Add cp;cp.left=10;cp.top=10;cp.Visible=true;...

word2012写论文之参考文献和图片

每次写论文都感到word的“博大精深”啊,一个版本一个样,一些原来版本还有的功能,后来的版本就没有了,一些原来版本叫这个名字的功能,下一个版本就换了个名字,你也太考验你用户的智商和耐心了吧!即使同一份文件,同一个版本的word的,换个机器就格式全乱了。得出的结论是,word绝对不适合写格式要求很高的文章,比如论文神马东西的。我是因为写毕业论文,没有late...

[Postman]查找替换(5)

在邮差中查找和替换 在Postman中快速轻松地查找和替换API项目中的文本。Postman应用程序使您能够执行全局查找和替换操作,该操作可在其各种组件(如集合,环境,全局和打开选项卡)中无缝工作。这实际上意味着您可以将搜索范围仅限于集合,环境,全局和选项卡。 要启动“查找和替换”面板,请单击侧栏底部的查找图标,如下面的屏幕所示: 将按照以下屏幕中的说明...

第七部分(一) 动态渲染页面爬取(Selenium的使用)

Ajax分析和抓取方式,是JavaScript动态渲染页面的一种情形,可使用 requests 或 urllib 爬取数据。JavaScript动态渲染的页面不是只有Ajax一种,比如中国青年网 http://news.youth.cn/gn/ 的分页部分由JavaScript生成的,不是原始的HTML代码,但是不包含Ajax请求。又比如ECharts的...