正文
javascript选项卡切换,纯css实现漂亮的选项卡切换
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
javascript如何实现浏览器选项卡的切换？
首先js是不大可能控制选项卡的，再说每种浏览器也都有不一样的选项卡模式，你通过api去实现不太可能。
你可以转换思路，不要用真正的选项卡，而是自己写一个类似于选项卡的页面，可以点击切换页面等等。点击切换选项卡或提交按钮时ajax加载你想要的内容就可以了。
js的tab选项卡点击切换或隐藏用jQuery也行！快！
//注意：变量id一定要为数字！
//需要引用jQuery包
$("#t1 a").click(function(){ //获取id为t1的div下面的所有a标签
var id = $(this).attr("id").substr(5);//截取当前点击的对象的id属性的第6位及之后的字符
$("#t1 a").attr("class","");//使所有的a标签的class样式都为空
$(this).attr("class","sel");//使被点击的a标签更换class样式为sel
$(".we").hide();//所有的class名为we的都隐藏
$("#w"+id).show();//让其中的一个class名为we并且id为w+id的div显示
})
高手解决下javascript问题-为什么选项卡切换后第一栏内容继续显示
//看了你后来的补充！感觉你应该还是不想页面的id号固定，那思路应该改下
//我的思路是这样的的在每个Content3之前再增加一个div。通过这个div然后获得其子元素，然后操作子元素就可以了 ，代码你看下就明白了
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
style type="text/css"
.nTab{
float: left;
width: 465px;
margin: 0 auto;
border-bottom:1px #009944 solid;
background:#d5d5d5;
background-position:left;
background-repeat:repeat-y;
margin-bottom:2px;
}
.nTab .TabTitle{
clear: both;
height: 30px;
overflow: hidden;
}
.nTab .TabTitle ul{
border:0;
margin:0;
padding:0;
}
.nTab .TabTitle li{
float: left;
width: 114px;
height:30px;
cursor: pointer;
padding-top: 5px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 2px;
list-style-type: none;
font-size: 14px;
text-align: center;
margin: 0;
}
.nTab .TabTitle .active{background:#ff0000; border-left:1px #009944 solid;border-top:1px #009944 solid;border-right:1px #009944 solid; width:111px; }
.nTab .TabTitle .normal{background:#00ff00; border:1px #009944 solid;}
.nTab .TabContent{
width:auto;background:#fff;
margin: 0px auto;
padding:10px 0 0 0;
border-right:1px #009944 solid;border-left:1px #009944 solid;
}
.none {display:none;}
/style
script type="text/javascript"
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i tabList.length; i++)
{
var contents=document.getElementById("_Content"+i).childNodes;
if (i == Num)
{
thisObj.className = "active";
for(var j=0;jcontents.length;j++){
contents[j].style.display = "block";
}
}else{
tabList[i].className = "normal";
for(var j=0;jcontents.length;j++){
contents[j].style.display = "none";
}
}
}
}
/script
/head
body
br /
br /
div align="center" style="padding-left:250px;"
div class="nTab"
!-- 标题开始 --
div class="TabTitle"
ul id="myTab1"
li class="active" onclick="nTabs(this,0);"aaa/li
li class="normal" onclick="nTabs(this,1);"bbb/li
li class="normal" onclick="nTabs(this,2);"ccc/li
li class="normal" onclick="nTabs(this,3);"ddd/li
/ul
/div
!-- 内容开始 --
div class="TabContent"
div id="_Content0"
div 000 /div
div 000 /div
div 000 /div
/div
div id="_Content1"
div class="none" 111 /div
div class="none" 111 /div
div class="none" 111 /div
/div
div id="_Content2"
div class="none" 222 /div
div class="none" 222 /div
div class="none" 222 /div
/div
div id="_Content3"
div class="none" 333 /div
div class="none" 333 /div
div class="none" 333 /div
/div
/div
/div
!-- 选项卡1结束 --
/div
/body
/html
