一个TAB选项卡的问题

wzcm87 2011-07-03 08:35:54

<!doctype html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8"/>

<title>sdfdsfsdfsdf</title>

<style type="text/css">

*{margin:0;padding:0;}

li{background:#0066cc;width:100px;color:#fff;width:100px;float:left;}

.box{display:none;border:1px solid #ccc;width:200px;height:100px;}

.active{background:#505050;}

</style>

<script type="text/javascript">

window.onload=function(){

var otab=document.getElementById('tab');

var oli=otab.getElementsByTagName('li')

var obox=otab.getElementsByTagName('box');

for(i=0;i<oli.length;i++){

		oli[i].index=i;

		oli[i].onclick=function()

		{			

			for(i=0;i<oli.length;i++)

			{			

			oli[i].className='';

			obox[i].style.display='none';			

			}				

			this.className='active';

			obox[this.index].style.display='block';

		};



}







}



</script>

</head>

<body>

<div id="tab">

	<ul>

	<li class="active">第一个</li>

	<li>第二个</li>

	</ul>

	<div class="box" style="display:block;">1</div>

	<div class="box">2</div>



</div>



</body>

</html>

点击无任何反应，求达人为我解释下。

...全文

86 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

乌镇程序员 2011-07-03

打赏
举报

getElementsByClassName('box')方法可以直接通过类名获取元素对象，可惜IE不支持。。

挨踢直男 2011-07-03

打赏
举报

不能通过class获得元素，默认的没有，可以通过自己写函数取得

挨踢直男 2011-07-03

打赏
举报

[Quote=引用 3 楼 wzcm87 的回复:]
没有html标签的名称为box的

我不理解这句话，难道不能这样取嘛
如果不能这样这样取，那取值应该注意那些？谢谢各位了

var otab=document.getElementById('tab');
var obox=otab.getElementByTagName('box');

<div id="tab">
<div class="box"></div>
<di……
[/Quote]

getElementById()通过id获得单个元素
getElementsByName()通过html元素名称获得名称，返回的是一个数组，因为同一张html页面中html元素的名称可以相同
getElementsByTagName()通过html标签名获得元素如 div,ul ,li ,p , table ,span等等都可以，返回的是一个数组，原因跟getElementsByName相同

乌镇程序员 2011-07-03

打赏
举报

<script type="text/javascript">

window.onload=function(){

var otab=document.getElementById('tab');

var oli=otab.getElementsByTagName('li')

var obox = document.getElementById('tab').getElementsByTagName('div'); //这里

for(i=0;i<oli.length;i++){

        oli[i].index=i;

        oli[i].onclick=function()

        {            

            for(i=0;i<oli.length;i++)

            {

            oli[i].className='';

            //obox[i].style.display='none'; 

			for(var j = 0; j < obox.length; j ++) {

				if (obox[j].className == 'box') obox[j].style.display = 'none';

			}

            }

            this.className='active';

            //查找并显示显示对应的<div class="box">

            var counter = 0;

			for(var j = 0; j < obox.length; j ++) {

				if (obox[j].className == 'box') {

					if (counter == this.index) {

						obox[j].style.display = 'block';

						break;

					}

					else counter ++;

				}

			}

        };

}

}



</script>

wzcm87 2011-07-03

打赏
举报

没有html标签的名称为box的

我不理解这句话，难道不能这样取嘛
如果不能这样这样取，那取值应该注意那些？谢谢各位了

var otab=document.getElementById('tab');
var obox=otab.getElementByTagName('box');

<div id="tab">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

</div>

床上等您 2011-07-03

打赏
举报



var obox=otab.getElementsByTagName('div'); //你的这行出现问题了，byTagName 是对象类型，并不是类名。

挨踢直男 2011-07-03

打赏
举报

window.onload=function(){

var otab=document.getElementById('tab');

var oli=otab.getElementsByTagName('li')

var obox=otab.getElementsByTagName('div');

for(i=0;i<oli.length;i++){

        oli[i].index=i;

        oli[i].onclick=function()

        {            

            for(i=0;i<oli.length;i++)

            {            

            oli[i].className='';

            obox[i].style.display='none';            

            }                

            this.className='active';

            obox[this.index].style.display='block';

        };



}







}