woaidongmao

文章均收录自他人博客,但不喜标题前加-[转贴],因其丑陋,见谅!~
随笔 - 1469, 文章 - 0, 评论 - 661, 引用 - 0
数据加载中……

JS滑动tab标签,供新手们学习。ie6/7/FF都通过

原文:http://www.cnblogs.com/cnfiowen/archive/2009/06/22/1508158.html

 

其实网上很多了,但是感觉要么CSS写得不好看,要么JS写的难以理解,今天就重新写了一下,加了注释,供新手们学习。
ie6/7/ff下顺利通过

 

<!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>滑动TAB</title>
<script language="javascript">
function tabChange(obj,id)
{
   
var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组
    var arrayul = document.getElementById(id).getElementsByTagName("ul"); //获取ul数组
    for(i=0;i<arrayul.length;i++)
    {
       
if(obj==arrayli[i])
        {
            arrayli[i].className = "cli";
            arrayul[i].className = "";
        }
       
else
        {
            arrayli[i].className = "";
            arrayul[i].className = "hidden";
        }
    }
}
</script>
<style type="text/css">
.tabbox
{width:300px;height:250px;}
.tabmenu
{width:295px;height:28px;border-left:1px solid  #CCC;border-top:1px solid #ccc;}
.tabmenu ul
{margin:0;padding:0;list-style-type: none;}
.tabmenu li
{ text-align:center; float:left; display:block; width:58px; height:27px; overflow:hidden; background-color: #D2E8F7; line-height:27px; border-right:#ccc 1px solid; border-bottom:#ccc 1px solid; display:inline; font-size:12px;}
.tabmenu .cli
{text-align:center;float:left;display:block;width:58px;height:27px;overflow:hidden;background-color: #fff;line-height:27px;border-right:#ccc 1px solid;border-bottom:#fff 1px solid;display:inline;font-size:12px; cursor:pointer;}
#tabcontent
{width:294px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;}
#tabcontent ul
{margin:0;padding:5px;list-style-type: none;}
#tabcontent .hidden
{display:none;}
</style>
</head>

<body>
   
<div class="tabbox">
       
<div class="tabmenu">
           
<ul>
               
<li onmouseover="tabChange(this,'tabcontent')" class="cli">军事</li>
               
<li onmouseover="tabChange(this,'tabcontent')">娱乐</li>
               
<li onmouseover="tabChange(this,'tabcontent')">国内</li>
               
<li onmouseover="tabChange(this,'tabcontent')">国外</li>
               
<li onmouseover="tabChange(this,'tabcontent')">游戏</li>
           
</ul>
       
</div>
       
<div id="tabcontent">
           
<ul name="tabul">
               
<li><a href="#">1111111111111111111111</a></li>
               
<li><a href="#">1111111111111111111111</a></li>
               
<li><a href="#">1111111111111111111111</a></li>
               
<li><a href="#">1111111111111111111111</a></li>
               
<li><a href="#">1111111111111111111111</a></li>
               
<li><a href="#">1111111111111111111111</a></li>
           
</ul>
           
<ul class="hidden">
               
<li><a href="#">2222222222222222222222</a></li>
               
<li><a href="#">2222222222222222222222</a></li>
               
<li><a href="#">2222222222222222222222</a></li>
               
<li><a href="#">2222222222222222222222</a></li>
               
<li><a href="#">2222222222222222222222</a></li>
               
<li><a href="#">2222222222222222222222</a></li>
           
</ul>
           
<ul class="hidden">
               
<li><a href="#">3333333333333333333333</a></li>
               
<li><a href="#">3333333333333333333333</a></li>
               
<li><a href="#">3333333333333333333333</a></li>
               
<li><a href="#">3333333333333333333333</a></li>
               
<li><a href="#">3333333333333333333333</a></li>
               
<li><a href="#">3333333333333333333333</a></li>
           
</ul>
           
<ul class="hidden">
               
<li><a href="#">4444444444444444444444</a></li>
               
<li><a href="#">4444444444444444444444</a></li>
               
<li><a href="#">4444444444444444444444</a></li>
               
<li><a href="#">4444444444444444444444</a></li>
               
<li><a href="#">4444444444444444444444</a></li>
               
<li><a href="#">4444444444444444444444</a></li>
           
</ul>
           
<ul class="hidden">
               
<li><a href="#">5555555555555555555555</a></li>
               
<li><a href="#">5555555555555555555555</a></li>
               
<li><a href="#">5555555555555555555555</a></li>
               
<li><a href="#">5555555555555555555555</a></li>
               
<li><a href="#">5555555555555555555555</a></li>
               
<li><a href="#">5555555555555555555555</a></li>
           
</ul>
       
</div>
   
</div>
</body>
</html>

 

 

posted on 2009-06-22 14:06 肥仔 阅读(927) 评论(0)  编辑 收藏 引用 所属分类: Web-前台


只有注册用户登录后才能发表评论。
【推荐】超50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理