当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js tab 选项卡

Javascript
window.onload 加载完毕的问题及解决方案（下）
jQuery 版本的文本输入框检查器Input Check
jquery Firefox3.5中操作select的问题
jquery 1.3.2 IE8中的一点点的小问题解决方法
javascript div 遮罩层封锁整个页面
javascript 页面只自动刷新一次
Javascript 区别浏览器 代码
checkbox 复选框不能为空
Prototype 学习 Prototype对象
Prototype 学习 工具函数学习($方法)
Prototype 学习 工具函数学习($A方法)
Prototype 学习 工具函数学习($w,$F方法)
Prototype Object对象 学习
Prototype Function对象 学习
Prototype Date对象 学习
JavaScript 事件对象的实现
JavaScript 事件查询综合
JavaScript 继承详解（一）
JavaScript 继承详解（二）
JavaScript 继承详解（三）

No. « 145 146 147 148 »

技术文章搜索

关键字

Javascript 中的 js tab 选项卡

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 176 ::
收藏到网摘: n/a

选项卡的实现方法比较多，但原理基本上都差不多，隐藏与显示轮换 一般需要事先写好css样式等
function tab(sId) {
var tabs = document.getElementsByTagName("H2");
var boxs = document.getElementsByTagName("h3");
if ( boxs[sId].style.display=="block"){
boxs[sId].style.display="none";
tabs[sId].style.backgroundColor="#E3F4FE";
tabs[sId].style.color="#000000";
}
else{
boxs[sId].style.display="block";
tabs[sId].style.backgroundColor="#3575CC";
tabs[sId].style.color="#ffffff";
}
for (var i=0; i<tabs.length; i++) {
if ( i != sId) {
boxs[i].style.display = "none";
tabs[i].style.backgroundColor="#E3F4FE";
tabs[i].style.color="#000000";
}
}
}

<h2 onclick="tab();">中英合作自考</h2>
<h3>
<ul>
<li></li>
</ul>
</h3>
</h2>