漂亮简洁滑动门代码

最新推荐文章于 2022-06-19 22:31:28 发布

ailao1178

最新推荐文章于 2022-06-19 22:31:28 发布

阅读量365

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/jizhitao/archive/2009/10/14/1582973.html

版权

Code
1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

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

<head>
4

<title>漂亮简洁滑动门代码 - www.webdm.cn</title>
6

function tabChange(obj,id)
8

{
9

var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组
10

var arrayul = document.getElementById(id).getElementsByTagName("ul"); //获取ul数组
11

for(i=0;i<arrayul.length;i++)
12

{
13

if(obj==arrayli[i])
14

{
15

arrayli[i].className = "cli";
16

arrayul[i].className = "";
17

}
18

else
19

{
20

arrayli[i].className = "";
21

arrayul[i].className = "hidden";
22

}
23

}
24

}
25

</script>
26

.tabbox {

}{width:300px;height:250px;}
28

.tabmenu {

}{width:295px;height:28px;border-left:1px solid #CCC;border-top:1px solid #ccc;}
29

.tabmenu ul {

}{margin:0;padding:0;list-style-type: none;}
30

.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;}
31

.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;}
32

#tabcontent {

}{width:294px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;}
33

#tabcontent ul {

}{margin:0;padding:5px;list-style-type: none;}
34

#tabcontent .hidden {

}{display:none;}
35

</style>
36

</head>
37

<body>
38

<div class="tabbox">
39

<div class="tabmenu">
40

<ul>
41

<li onmouseover="tabChange(this,'tabcontent')" class="cli">最新下载</li>
42

<li onmouseover="tabChange(this,'tabcontent')">网站代码</li>
43

<li onmouseover="tabChange(this,'tabcontent')">源码下载</li>
44

<li onmouseover="tabChange(this,'tabcontent')">网页特效</li>
45

<li onmouseover="tabChange(this,'tabcontent')">电子书籍</li>
46

</ul>
47

</div>
48

<div id="tabcontent">
49

<ul name="tabul">
50

<li><a href="#">最新更新下载，欢迎访问。</a></li>
51

</ul>
52

<ul class="hidden">
53

<li><a href="#">网站代码</a></li>
54

</ul>
55

<ul class="hidden">
56

<li><a href="#">精品高质量学习型源码</a></li>
57

</ul>
58

<ul class="hidden">
59

<li><a href="#">网页特效，你喜欢吗？</a></li>
60

</ul>
61

<ul class="hidden">
62

<li><a href="#">电子书，助你学习天天向上。</a></li>
63

</ul>
64

</div>
65

</div>
66

</body>
67

</html>
68

转载于:https://www.cnblogs.com/jizhitao/archive/2009/10/14/1582973.html

ailao1178

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
漂亮简洁滑动门代码

Code1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2<htmlxmlns="http://www.w3.org/1999/xhtml">3<head&...
复制链接

扫一扫