<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XYX</title>
<style type="text/css">
*{ margin:0; padding:0;}
#Tab_box{ width:400px; margin:30px auto;}
#Tab_box h2{ height:24px; line-height:24px; font-size:14px; background:#090;}
#Tab_box h2 span{ margin:0 15px; cursor:pointer;}
#Tab_box h2 span.current{ color:#fff;}
#Tab_box .main{ padding:10px; font-size:12px; display:none; background:#CCC;}
</style>
</head><body>
<div id="Tab_box">
<h2 id="Title"><span class="current">标题一</span><span>标题二</span><span>标题三</span></h2>
<div id="wap">
<div class="main" style="display:block;">内容一</div>
<div class="main">内容二</div>
<div class="main">内容三</div>
</div>
</div>
<script type="text/javascript">
var menus=document.getElementById("Title").getElementsByTagName("span");
var mains=document.getElementById("wap").getElementsByTagName("div");
for(var i=0; i<menus.length; i++){
menus[i].index=i;
menus[i].onmouseover=mousevoer;
}
function mousevoer(){
for(var i=0; i<menus.length; i++){
menus[i].className="";
mains[i].style.display="none";
}
this.className='current';
mains[this.index].style.display="block";
}
</script>
</body>
</html>求人解释一下menus[i].index=i;与mains[this.index]是什么意思?还有如果一个页面中多次用到这个选项卡JS要怎么写?请教了。
解决方案 »
- 关于js的树形表的生成
- Ext bbar问题该怎么解决啊···
- 图片旋转
- 请教高手了,如何对WEB页面中指定的对像右键弹出自定义的菜单出来?
- 关于正则式:match,test,find,split,exec等使用正则式的函数的返回值问题
- clip属性在IE和FireFox中返回的值不同
- 使用表单上传文件时如何在提交前知道上传文件的大小?
- 关闭窗口之复杂问题:IE5.0+SP4如何无提示关闭?
- 怎么取得一个被撑大了的层的宽度和长度??
- 谁知道左边那个“论坛列表”的效果是怎么作出来的?可给代码吗?
- 如何控制setInterval()的开始和停止
- 求submit+onsubmit+action的组合用法。
多次用到,可以把这些js,封装成一个对象!使用时 new 就可以了http://blog.csdn.net/hch126163/archive/2010/12/02/6050485.aspx