兼容于各种浏览器平台的选项卡

Rain · 发表于 2009-5-19 10:51:33

兼容于各种浏览器平台的选项卡
刚做了 ie6、7，FF2.0，OP9测试，全部没问题。

顺便说一句，你的站点如果需要用N个选项卡的话，那用它就是太方便了。一段JS全站调用，只是需要做CSS美化。

[html]<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡</title>
<script type="text/javascript">
var ddtabmenu={
      disabletablinks: false,
      currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""),

definemenu:function(tabid, dselected){
      this[tabid+"-menuitems"]=null
      this.addEvent(window, function(){ddtabmenu.init(tabid, dselected)}, "load")
},

showsubmenu:function(tabid, targetitem){
      var menuitems=this[tabid+"-menuitems"]
for (i=0; i<menuitems.length; i++){
            menuitems.className=""
            if (typeof menuitems.hasSubContent!="undefined")
                     document.getElementById(menuitems.getAttribute("rel")).style.display="none"
      }
      targetitem.className="current"
      if (typeof targetitem.hasSubContent!="undefined")
            document.getElementById(targetitem.getAttribute("rel")).style.display="block"
},

isSelected:function(menuurl){
      var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
      return (ddtabmenu.currentpageurl==menuurl)
},

addEvent:function(target, functionref, tasktype){
      var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
      if (target.addEventListener)
            target.addEventListener(tasktype, functionref, false)
      else if (target.attachEvent)
            target.attachEvent(tasktype, functionref)
},

init:function(tabid, dselected){
      var menuitems=document.getElementById(tabid).getElementsByTagName("a")
      this[tabid+"-menuitems"]=menuitems
      for (var x=0; x<menuitems.length; x++){
            if (menuitems[x].getAttribute("rel")){
                     this[tabid+"-menuitems"][x].hasSubContent=true
                     if (ddtabmenu.disabletablinks)
                              menuitems[x].onclick=function(){return false}
            }
            else //for items without a submenu, add onMouseout effect
                     menuitems[x].onmouseout=function(){this.className=""}
            menuitems[x].onmouseover=function(){ddtabmenu.showsubmenu(tabid, this)}
            if (dselected=="auto" & typeof setalready=="undefined" && this.isSelected(menuitems[x].href)){
                     ddtabmenu.showsubmenu(tabid, menuitems[x])
                     var setalready=true

            }
            else if (parseInt(dselected)==x)
                     ddtabmenu.showsubmenu(tabid, menuitems[x])
      }
}
}
</script>
<style type="text/css">
.basictab ul {
      margin: 4px;
      padding: 6px 0;
      margin-left: 0;
      width:95%;
      font: bold 12px Verdana;
      border-bottom: 1px solid gray;
      list-style-type: none;
      text-align: left;
}
.basictab li {
      display: inline;
      margin: 0;
}
.basictab li a {
      text-decoration: none;
      padding: 6px 7px;
      margin-right: 3px;
      border: 1px solid gray;
      border-bottom: none;
      background-color: #f6ffd5;
      color: #2d2b2b;
}
.basictab li a:visited {
      color: #2d2b2b;
}
.basictab li a:hover, .basictab li a.current {
      background-color: #DBFF6C;
      color: black;
}
.basictab li a:active {
      color: black;
}
.tabcontainer {
      clear: left;
      width:95%;
      border:1px solid gray;
}
.tabcontent {
      display:none;
}
</style>
<script type="text/javascript">
      ddtabmenu.definemenu("ddtabs1", 0)
</script>
<body>
<div id="ddtabs1" class="basictab">
  <ul>
<li><a href="#" rel="sc1">你说</a></li>
<li><a href="#" rel="sc2">这个</a></li>
<li><a href="#" rel="sc3">选项卡</a></li>
<li><a href="#" rel="sc4">经典</a></li>
<li><a href="#" rel="sc5">不经典</a></li>
  </ul>
</div>
<DIV class="tabcontainer">
  <div id="sc1" class="tabcontent"> 你说</div>
  <div id="sc2" class="tabcontent"> 这个</div>
  <div id="sc3" class="tabcontent"> 选项卡</div>
  <div id="sc4" class="tabcontent"> 经典 </div>
  <div id="sc5" class="tabcontent"> 不经典 </div>
</DIV>
</body>
</html>
[/html]

		自动登录	找回密码
密码			注册