javascript选项卡切换,js简单选项卡
高手解决下javascript问题-为什么选项卡切换后第一栏内容继续显示
//看了你后来的补充！感觉你应该还是不想页面的id号固定，那思路应该改下
创新互联建站专注于企业成都全网营销推广、网站重做改版、友好网站定制设计、自适应品牌网站建设、H5页面制作、成都商城网站开发、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为友好等各大城市提供网站开发制作服务。
//我的思路是这样的的在每个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
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如何实现浏览器选项卡的切换？
首先js是不大可能控制选项卡的，再说每种浏览器也都有不一样的选项卡模式，你通过api去实现不太可能。
你可以转换思路，不要用真正的选项卡，而是自己写一个类似于选项卡的页面，可以点击切换页面等等。点击切换选项卡或提交按钮时ajax加载你想要的内容就可以了。
火狐浏览器怎么将javascript改为启用模式？
您好！
要启用JavaScript，请先安装SettingSanity附加组件
点击 Firefox 窗口顶部的 Firefox 按钮并选择选项 菜单。
在设置窗口, 选择内容选项卡.
启用JavaScript: 勾选该选项来启用JavaScript。
要更改高级设置，按下高级....
点击确定按钮关闭“选项”窗口。
参考这里：
希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。
了解更多火狐浏览器的使用小技巧，请到火狐社区：
感谢您对火狐浏览器的支持！
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
本文名称：javascript选项卡切换,js简单选项卡
转载注明：http://shouzuofang.com/article/dsccpsp.html