javascript如何实现浏览器选项卡的切换？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript如何实现浏览器选项卡的切换？相关的知识，希望对你有一定的参考价值。
比如现在的IE,firefox,chrome等浏览器，打开新页面时，一般都在新的选项卡中打开，比如图：
上图的IE浏览器共打开了5个页面，有5个选项卡，假设依次为A,B,C,D,E。如果我的工作页面为D选项卡，当点击D选项卡网页上的提交按钮时，会打开新的页面，比如为E。我希望点击提交按钮时，D选项卡仍然为当前选项卡，而不是变成E为当前选项卡了。我在D页面中设置了倒计时器，当D页面的计时器倒计时结束时，自动将E切换为当前选项卡。
如何实现上述效果？
你可以转换思路，不要用真正的选项卡，而是自己写一个类似于选项卡的页面，可以点击切换页面等等。点击切换选项卡或提交按钮时ajax加载你想要的内容就可以了。 参考技术A 无法实现具体某个选项卡切换，只能换个思路，你在D上点击提交的时候，弹出新的选项卡E，然后在E的操作结束后，代码中可以实现关闭当前选项卡，然后会自动回到D选项卡上。 参考技术B 很常见的，每个选项卡对应着一个div层div层默认是隐藏的用javascript捕捉onmouseover事件，鼠标移动到相关选项卡上就显示对应的div层 参考技术C window.open可以的，不懂来找我，别听这人胡说八道了，误导世人，就是想拿分数
Css & JavaScript & jquery 实现选项卡的制作
阅读目录
Css 源码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<style>
*margin:0;padding: 0;
bodypadding: 50px
atext-decoration:none;
#listlist-style-type: none
#list a
float: left;
background: orange;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
#list a:hoveropacity: 0.6
.clearclear: both;
#content div
width: 298px;height: 150px;
border:1px solid green;
#content
height: 152px;overflow: hidden;
</style>
</style>
</head>
<body>
<div id="tab">
<ul id="list">
<li><a href="#div1">菜单1</a></li>
<li><a href="#div2">菜单2</a></li>
<li><a href="#div3">菜单3</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="content">
<div id="div1">内容111111111111.......</div>
<div id="div2">内容222222222222.......</div>
<div id="div3">内容333333333333......</div>
</div>
</body>
</html>
源码解析
核心原理，a 标签的锚点效果 + 父 div 限宽 + 多的部分隐藏。
1、如何实现 a 标签的锚点效果？
href 属性找到对应的位置就好，和选择器一样，一般是 id。
<li><a href="#div1">菜单1</a></li>
<li><a href="#div2">菜单2</a></li>
<li><a href="#div3">菜单3</a></li>
<div id="div1">内容111111111111.......</div>
<div id="div2">内容222222222222.......</div>
<div id="div3">内容333333333333......</div>
2、如何实现父 div 限宽 + 多的部分隐藏？
#content
height: 152px;overflow: hidden;
3、如何实现移上去标签改变透明度？
opacity 属性
#list a:hoveropacity: 0.6
4、clear:both 一般写在哪个里面？
一般单独写在一个类里面，用的时候直接调用就好了，简单方法
.clearclear: both;
JavaScript 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡2</title>
<style>
*margin:0px;padding: 0px
bodypadding: 50px
#list
list-style-type: none;
height: 30px;
font-size: 14px
#list li
width: 80px;
margin-right: 5px;
height: 30px; line-height: 30px;
text-align: center;
border: solid green 1px;border-bottom: none;
border-radius: 5px 5px 0 0;
float: left;
cursor: pointer;
#content div
width: 400px;
height: 150px;
border:1px solid green;
display: none;
background: rgba(100,50,20,0.2);
#content div.showdisplay: block;
#list li:hover
background: rgba(100,50,20,0.4);
.activebackground: rgba(100,50,20,0.2);
</style>
</head>
<body>
<div id="tab">
<ul id="list">
<li class="active">第一部分</li>
<li>第二部分</li>
<li>第三部分</li>
</ul>
<div id="content">
<div class="show">JS进阶......</div>
<div>JQ精讲......</div>
<div>JS+JQ+CSS3特效、技巧、案例专题......</div>
</div>
</div>
<script>
// var list=document.getElementById('list')
// console.log(list);
// var content=document.getElementById('content')
// var oli=list.getElementsByTagName('li')
// console.log(oli);
// var li_content=content.getElementsByTagName('div')
var oli=document.getElementById('list').getElementsByTagName('li')
// console.log(oli)
var li_content=document.getElementById('content').getElementsByTagName('div')
for(var i=0;i<oli.length;i++)
oli[i].index=i
// console.log(oli[i].index)
oli[i].onclick=function()
//首先获取到当前被点击li的索引
//alert(this.index)
//点击后让相应的div显示到当前
for(var j=0;j<li_content.length;j++)
oli[j].className="";
li_content[j].style.display='none'
li_content[this.index].style.display='block';
oli[this.index].className="active";
</script>
</body>
</html>
JavaScript 源码解析
通过索引把选项卡头的 li 标签和选项卡内容的 div 标签联系在一起，通过控制 div 标签的display 属性可以实现选项卡的选项切换。
1、某些样式设置了，但是出不来效果的原因可能是什么？
优先级会导致某些特效出不来
现在设置的优先级低于之前的
可以通过加父标签的方式来增加优先级
2、如何增加样式的优先级？
可以通过加父标签的方式来增加优先级
3、如何实现一组标签中点某个标签，这个标签的样式改变？
动态给点的标签添加一个自己写好的激活样式
oli[this.index].className="active";
4、如何消除一个元素的所有类？
dom 对象的 className 赋空值
oli[j].className="";
5、如何让一个隐藏的元素显示？
将 dom 对象的 style 的 display 属性设置为 none
li_content[j].style.display='none'
6、如何获取一个 id 为 content 的 div 里面的另外的 div ？
getElement 的链式写法
（因为 getElement 是 document 的方法，其实也是 dom 对象的方法）
var li_content=document.getElementById('content').getElementsByTagName('div')
jQuery源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡3</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
*margin: 0px;padding: 0px
bodypadding: 50px
ul list-style-type: none;
#list
height: 30px;line-height: 30px;
margin-bottom: 2px
#list li
width: 100px;text-align: center;
border:1px solid green;
background: rgba(100,50,20,0.2);
float:left;
cursor: pointer;
#content
width: 304px;height: 150px;
border:1px solid green;border-top: none;
#content divdisplay: none;
#content div.showdisplay: block;
#list li.active
background: #fff;
border-bottom: none;
</style>
</head>
<body>
<div id="tab">
<ul id="list">
<li class="active">第一部分</li>
<li>第二部分</li>
<li>第三部分</li>
</ul>
<div id="content">
<div class="show">JS进阶......</div>
<div>JQ精讲......</div>
<div>JS+JQ+CSS3特效、技巧、案例专题......</div>
</div>
</div>
<script>
$(function()
var $li=$('#list li')
$li.click(function()
$(this).addClass('active').siblings().removeClass('active');
$('#content div').eq($li.index(this)).show().siblings().hide()
)
)
</script>
</body>
</html>
jQuery 源码解析
ul>li 做选项卡的选项卡头，多个 div 做选项卡的内容，点到对应的 li，就切换到对应的 div，用 index() 获取 li 索引，与 div 联系。
1、如何获取一个元素所在父亲中同类孩子的索引？
index() 方法
$('#content div').eq($li.index(this)).show().siblings().hide()
2、如何选择除自己之外的所有同级？
没必要用 not() 方法，用 siblings() 就足够了，简单好用。
$(this).addClass('active').siblings().removeClass('active');
3、除 clear:both 之外还有什么好方法可以清楚浮动？
设置 margin-bottom，因为这样就能保证不在同一行（在多行），float 的效果自然影响不到。
#list
height: 30px;line-height: 30px;
margin-bottom: 2px
以上是关于javascript如何实现浏览器选项卡的切换？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 php 或 javascript 获取所有浏览器中当前打开的选项卡的 url？
如何显示足够智能以处理多个打开的浏览器或选项卡的会话超时警告