柚子快报邀请码778899分享：js选项卡

柚子快报邀请码778899分享：js选项卡

http://yzkb.51969.com/

HTML/CSS部分：

我的结构是这么写的：

每个选项的内容被嵌套在选项卡里。

ul li div。

ul是那个选项卡盒子，当然你还可以在上面弄个div什么的。

li当然是选项卡的选项咯。

div当然是每个选项显示出来的内容咯。根据语义化，这里的div视情况而定。比如选项内容是新闻列表时，这里可以就是li咯。

或者直接使用 dl dt dl 。

HTML/CSS部分：

我的结构是这么写的：

每个选项的内容被嵌套在选项卡里。

ul li div。

ul是那个选项卡盒子，当然你还可以在上面弄个div什么的。

li当然是选项卡的选项咯。

div当然是每个选项显示出来的内容咯。根据语义化，这里的div视情况而定。比如选项内容是新闻列表时，这里可以就是li咯。

或者直接使用 dl dt dl 。

也可以使用不嵌套的方式。比如：

ul li 这是选项卡。

ul li 这是选项呀里面的内容。

使用样式把选项卡和内容黏合在一起去。

下面是每个选项内容嵌套在在相应选项卡下的HTML/CSS。

HTML/CSS

JS代码：

之前的练习里有个方法，就是“显示要显示的，隐藏所有不显示的”，这个观念这里可以用到。比如把先通过for遍历全部隐藏掉，再把当前点击的div显示出来。

然后……我写出来就是这样的。因为例子里面只有一个div，所以直接用div[0]写了。频繁获取了div[0]，为了让代码看起来更简洁些，将其改为 div(Parent) 函数。

var li=document.getElementsByTagName("li");

for(var i=0;i

//li[i].getElementsByTagName("div")[0].style="display:none";

div(li[i]).style="display:none";

li[i].onclick=function(){

for(var j=0;j

//li[j].getElementsByTagName("div")[0].style="display:none";

div(li[j]).style="display:none";

}

//显示点击的li

//this.getElementsByTagName("div")[0].style="display:block";

div(this).style="display:block";

}

}

//默认要显示的选项（第一个li）

//li[0].getElementsByTagName("div")[0].style="display:block";

div(li[0]).style="display:block";

//Parent父级元素

function div(Parent){

return Parent.getElementsByTagName("div")[0];

}

JS 方法一

还想到其他方法……

但等我先把其他几个小例子忽悠好了再来补充吧。

柚子快报邀请码778899分享：js选项卡

http://yzkb.51969.com/

好文推荐