这个功能是很久之前实现的,现在发上来,很长一段时间没更新博客了,真惭愧。这个JS代码还有很多修改的空间,先发上来,以后再发个更新的版本吧。
这是效果图:
【HTML代码】
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<
div
id="menu">
<!--tag标题-->
<
ul
id="nav">
<
li
><
a
href="#" class="selected">tab1</
a
></
li
>
<
li
><
a
href="#" class="">tab2</
a
></
li
>
<
li
><
a
href="#" class="">tab3</
a
></
li
>
<
div
style="clear:both"></
div
>
</
ul
>
<!--二级菜单-->
<
div
id="menu_con">
<
div
class="tag" style="display:block">
这是TAB切换效果区域1
</
div
>
<
div
class="tag" style="display:none">
这是TAB切换效果区域2
</
div
>
<
div
class="tag" style="display:none">
这是TAB切换效果区域3
</
div
>
</
div
>
</
div
>
|
【js】
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
/**
* tabs
* @author 橡树小屋
*/
var
tabs=
function
(){
function
tag(name,elem){
return
(elem||document).getElementsByTagName(name);
}
//获得相应ID的元素
function
id(name){
return
document.getElementById(name);
}
function
first(elem){
elem=elem.firstChild;
return
elem&&elem.nodeType==1? elem:next(elem);
}
function
next(elem){
do
{
elem=elem.nextSibling;
}
while
(
elem&&elem.nodeType!=1
)
return
elem;
}
return
{
set:
function
(elemId,tabId){
var
elem=tag(
"li"
,id(elemId));
var
tabs=tag(
"div"
,id(tabId));
var
listNum=elem.length;
var
tabNum=tabs.length;
for
(
var
i=0;i<listNum;i++){
elem[i].onclick=(
function
(i){
return
function
(){
for
(
var
j=0;j<tabNum;j++){
if
(i==j){
tabs[j].style.display=
"block"
;
//alert(elem[j].firstChild);
elem[j].firstChild.className=
"selected"
;
}
else
{
tabs[j].style.display=
"none"
;
elem[j].firstChild.className=
""
;
}
}
}
})(i)
}
}
}
}();
window.onload=
function
(){
tabs.set(
"nav"
,
"menu_con"
);
}
|
【CSS】
1
2
3
4
5
6
7
8
9
10
11
12
13
|
body{ background:
#FFF;}
a{color:
#585858}
#menu{width:360px;}
/*-------------------nav样式----------------------*/
#menu #nav {display:block;width:100%;padding:0;margin:0;list-style:none;
background:url(../images/bg.gif)}
#menu #nav li {float:left;width:120px;}
#menu #nav li a {display:block;line-height:27px;text-decoration:none;padding:0 0 0 5px; text-align:center}
/*-------------------列表标题样式----------------------*/
#menu_con{ width:358px; height:135px;border:1px solid #BF9660; border-top:none}
.selected{background:url(../images/tag_bg.gif);}
.clear{ clear:both}
|
调用方法:
tabs.set("nav","menu_con");
代码下载 点击这里
只实现了点击切换的效果。