JS选项卡

来源：互联网发布：李自成山海关大战知乎编辑：程序博客网时间：2024/05/29 03:22

用到的JS函数：

//id选项卡区域，title选项卡标题标签，classname切换区域class,checkclass标题选中，liid标签不唯一时可选参数为标题区域idfunction setTab(id,title,classname,checkclass,liId){   if(!document.getElementById || !document.getElementsByTagName || !document.getElementById(id)) return false;var id=document.getElementById(id);if(!liId){var title=id.getElementsByTagName(title);}else{var liId=document.getElementById(liId);var title=liId.getElementsByTagName(title)};var div=id.getElementsByTagName("div");var box=new Array();for (var m=0;m<div.length;m++){if (div[m].className==classname){box.push(div[m]);}}for (var i=0;i<title.length;i++){title[i].onmouseover=function(){var num=getIndex(this,title);for (var j=0;j<title.length;j++ ){title[j].className="";box[j].style.display="none";}this.className=checkclass;box[num].style.display="block";}}}//得到数组中某个元素位置function getIndex(con,conArray){for (var p in conArray) {if(con==conArray[p])return Number(p);}return -1;//如果没有，返回-1}

示例一：

<body><style type="text/css">.tab{border:1px solid #000;width:300px;position:relative;height:150px;margin-bottom:30px;}.tab h2{margin:0;float:left;font-size:12px;line-height:22px;width:100px;text-align:center;cursor:pointer;background-color:#EEEEEE;}.tab .selected{background-color:red;} .tab_d{position:absolute;left:0;top:25px;}</style><div class="tab" id="tab"><h2 class="selected">标题一</h2><div class="tab_d">内容一</div><h2>标题二</h2><div class="tab_d" style="display:none">内容二</div><h2>标题三</h2><div class="tab_d" style="display:none">内容三</div></div>

调用选项卡方法：

window.onload=function(){setTab("tab","h2","tab_d","selected");}

示例二：

<style type="text/css">ul{margin:0;padding:0;list-style:none;}.tab2{border:1px solid #000000;width:300px;}.tab2_t li{float:left;width:100px;text-align:center;background-color:#EEEEEE;cursor:pointer;}.tab2_t .selected{background-color:red;}</style><div class="tab2" id="tab2"><ul class="tab2_t" id="tab2_t"><li class="selected">标题一</li><li>标题二</li><li>标题三</li></ul><div class="tab2_d"><ul><li>1</li><li>1</li></ul></div><div class="tab2_d" style="display:none"><ul><li>2</li><li>2</li></ul></div><div class="tab2_d" style="display:none"><ul><li>3</li><li>3</li></ul></div></div>

调用JS方法：

window.onload=function(){setTab("tab2","li","tab2_d","selected","tab2_t");}

demo下载：http://download.csdn.net/detail/jyy_12/3599354