最简单的tab标签页-freejs.net代码演示

首页>>TAB标签>>最简单的tab标签页(2013-09-06)

最简单的tab标签页

本例很简单，效果也没有

2个不同的，鼠标经过和鼠标点击显示对应选项卡内容

适合学习和自己更改，添加样式

XML/HTML Code

<h1><span id="at01" class="dd">鼠标经过显示内容www.freejs.net</span> <span id="at02">选卡二</span></h1>
<div id="ad01">内容一</div>
<div id="ad02" style="display:none;">内容二</div>
<br /><br />
<h1><span id="bt01" class="dd">选卡一</span> <span id="bt02">选卡二</span></h1>
<div id="bd01">内容一</div>
<div id="bd02" style="display:none;">内容二</div>
<script type="text/javascript">
<!--
function scrollDoor(){
}
scrollDoor.prototype = {
sd : function(menus,divs,openClass,closeClass,eventType){
var _this = this;
if(menus.length != divs.length)
{
alert("菜单栏数目不一致！");
return false;
}
for(var i = 0 ; i < menus.length ; i++)
{
_this.$(menus[i]).value = i;
_this.$(menus[i])[(eventType == true)?'onmouseover':'onclick'] = function()
{
for(var j = 0 ; j < menus.length ; j++)
{
_this.$(menus[j]).className = closeClass;
_this.$(divs[j]).style.display = "none";
}
_this.$(menus[this.value]).className = openClass;
_this.$(divs[this.value]).style.display = "block";
}
}
},
$ : function(oid){
if(typeof(oid) == "string")
return document.getElementById(oid);
return oid;
}
}
window.onload = function(){
var SDmodel = new scrollDoor();
SDmodel.sd(["at01","at02"],["ad01","ad02"],"dd","","1");//1为鼠标滑过，0为鼠标点击状态
SDmodel.sd(["bt01","bt02"],["bd01","bd02"],"dd","","0");
}
-->
</script>