收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1806|回复: 2

求教选项卡不知道为何不显示?

[复制链接]
发表于 2011-3-1 10:40:45 | 显示全部楼层 |阅读模式
<!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></title>
<style>

*{margin:0;padding:0}
ul,ol{list-style-type:none;}
ul{width:600px;}
.clear { zoom: 1; }
.clear:after { content: '\20'; display: block; clear: both; }
ul li{width:150px;height:50px;float:left;border:1px red solid;line-height:50px;text-align:center;cursorointer}
.on{background:blue}
ol{width:600px;}
ol li{width:100%;height:400px;border:1px green solid;display:none}
.show{display:block;}
</style>
<script type="text/javascript">
        window.onload=function ()
        {
                var oDiv=document.getElementById('wai');
                var aLiBtn=oDiv.getElementsByTagName('ul')[0];
                var aLi=aLiBtn.getElementsByTagName('li');
                var yDiv=document.getElementById('father');
                var aDiv=yDiv.getElementsByTagName('li')[0];
                var i=0;
                for(i=0;i<aLi.length;i++)
        {        aLiBtn[i].index=i;

                aLiBtn[i].onmouseover=tab;
        };
        function tab()
        {
                for(i=0;i<aLi.length;i++)
                {
                        aLiBtn[i].className='on';
                        alert(i)
                        aDiv[i].style.display='none';
                }
               
                this.className='show';
                aDiv[this.index].style.display='block';
        }
        }

</script>
</head>
<body>
<div id="wai" class="left_1" >
        <ul class="clear">
                <li class="on">按钮一</li>
                <li>按钮二</li>
                <li>按钮三</li>
        </ul>
        <ol id="father">
                <li class="show">内容一</li>
                <li>内容二</li>
                <li>内容三</li>
        </ol>

</div>



</body>
</html>
发表于 2011-3-1 11:15:44 | 显示全部楼层
是不是这个意思呢?,另外怎么写法和秒味教的一样 - -#

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2011-3-1 13:34:11 | 显示全部楼层
你的对象引用错误、
   for(i=0;i<aLi.length;i++)
       {       aLiBtn[i].index=i;

              aLiBtn[i].onmouseover=tab;
       };

这里不是应该是
   for(i=0;i<aLi.length;i++)
       {       aLi[i].index=i;

              aLi[i].onmouseover=tab;
       };
下面的 function tab() 也有问题

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2020-2-27 13:07 , Processed in 0.106177 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表