<!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延迟执行
- window.open 一个窗口的时候 写死了 子窗口的大小,子窗口还能不能通过js再改变 其大小
- js文件在IE6和IE7里的调用问题
- 求教javaScript实现表格动态增行删行?
- jQuery Mobile怎么达成自动检测项目版本,进行升级、安装?
- 想问问大家,showmodaldialog可不可以加上滚动条啊?
- 在javascript中,怎样定义表table的某一列td的属性rowspan ,急!!!!
- 急!求助。
- 高分求助,JS菜单问题,在线等
- 如何控制setInterval()的开始和停止
- 求submit+onsubmit+action的组合用法。
多次用到,可以把这些js,封装成一个对象!使用时 new 就可以了http://blog.csdn.net/hch126163/archive/2010/12/02/6050485.aspx