正文

javascript选项卡切换,js简单选项卡

IP云
IP云V管理员/1 阅读
11/23
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

高手解决下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

相关问答

Q1: 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显示

})

Q2: javascript如何实现浏览器选项卡的切换？

首先js是不大可能控制选项卡的，再说每种浏览器也都有不一样的选项卡模式，你通过api去实现不太可能。

你可以转换思路，不要用真正的选项卡，而是自己写一个类似于选项卡的页面，可以点击切换页面等等。点击切换选项卡或提交按钮时ajax加载你想要的内容就可以了。

Q3: 火狐浏览器怎么将javascript改为启用模式？

您好！

要启用JavaScript，请先安装SettingSanity附加组件

点击 Firefox 窗口顶部的 Firefox 按钮并选择选项 菜单。

在设置窗口, 选择内容选项卡.

启用JavaScript: 勾选该选项来启用JavaScript。

要更改高级设置，按下高级....

点击确定按钮关闭“选项”窗口。

参考这里：

希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。

了解更多火狐浏览器的使用小技巧，请到火狐社区：

感谢您对火狐浏览器的支持！

Q4: JS如何写tab选项卡的循环切换,并且如果选中当前选项卡的,则要从选中的下一个开始循环

!DOCTYPE html

html

head

meta charset="UTF-8"

titleTab效果/title

style type="text/css"

ul{

list-style: none;

}

*{

margin: 0;

padding: 0;

}

#tab{

border: 1px solid #ccc;

margin: 20px auto;

width: 403px;

border-top: none;

}

.list ul{

overflow: hidden;

}

.list li{

float: left;

}

.list li{

padding-left: 28px;

padding-right: 28px;

padding-top: 6px;

padding-bottom: 6px;

border: 1px solid #ccc;

background: -moz-linear-gradient(top, #FEFEFE, #EDEDED);

background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));

border-right: none;

cursor: pointer;

}

#listCon{

height: 100px;

}

#listCon div{

padding:10px;

position:absolute;

opacity:0;

filter:alpha(opacity=0);

}

.list li:first-child{

border-left: none;

}

.list li:hover{

background: #fff;

border-bottom: none;

}

.list li.cur{

background: #fff;

border-bottom: none;

}

#listCon div.cur{

opacity:1;

filter:alpha(opacity=100);

}

/style

/head

body

div id="tab"

div

ul

li许嵩/li

li周杰伦/li

li林俊杰/li

li陈奕迅/li

/ul

/div

div id="listCon"

div断桥残雪、千百度、幻听、想象之中/div

div红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话/div

div被风吹过的夏天、江南、一千年以后/div

div十年、K歌之王、浮夸/div

/div

/div

script type="text/javascript"

window.onload = function(){

var oDiv = document.getElementById("tab");

var lis = oDiv.getElementsByTagName("li");

var oDivCon = document.getElementById("listCon");

var lisDiv = oDivCon.getElementsByTagName("div");

for(var i=0;ilis.length;i++){

lis[i].index = i;

lis[i].onmouseover = function(){

show(this.index);

}

}

function show(a){

for(var j=0;jlis.length;j++){

lis[j].className = "";

lisDiv[j].className = "";

}

lis[a].className = "cur";

lisDiv[a].className = "cur";

}

}

/script

/body

/html