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

Javascript
JavaScript Tween算法及缓动效果
强制设为首页的JS代码
IE8浏览器Cookie的处理
JavaScript入门教程(1):什么是JS
JavaScript入门教程(2):JS基础知识
JavaScript入门教程(3):面向对象
JavaScript入门教程(4):浏览器对象
JavaScript入门教程(5):Screen屏幕对象
JavaScript入门教程(6):Window窗口对象
JavaScript入门教程(7):History历史对象
JavaScript入门教程(8):Location地址对象
JavaScript入门教程(9):Document文档对象
JavaScript入门教程(10):认识其他对象
JavaScript入门教程(11):事件处理
JavaScript入门教程(12):对象化编程
JavaScript入门教程(13):Cookies
JavaScript库开发规则
JavaScript教程:网页时间问题
如何将渐进增强应用到javascript脚本
简述JavaScript的scope机理

Javascript 中的 js tab 选项卡


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 369 ::
收藏到网摘: 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>