简单的常用栏目切换js.还不知道怎么上传文件呢.有点郁闷
直接贴代码.html
View Code
<script type="text/javascript">
function mouse(obj)
{
var plist = obj.parentNode.getElementsByTagName("a");
for(i=0;i<plist.length;i++)
{
if(obj == plist[i])
{
plist[i].className = "hover_1";
}
else
{
plist[i].className = "hover_3";
}
}
}
</script>
</head>
<body>
<div class="main">
<a href="#" class="hover_1" onmouseover="mouse(this)" id="click_1" >个人文件夹</a>
<a href="#" class="hover_3" onmouseover="mouse(this)" id="click_2">文件夹管理</a>
<a href="#" class="hover_3" onmouseover="mouse(this)" id="click_3">文件夹管理</a>
<a href="#" class="hover_3" onmouseover="mouse(this)" id="click_4">文件夹管理</a>
<a href="#" class="hover_3" onmouseover="mouse(this)" id="click_5">文件夹管理</a>
<a href="#" class="hover_3" onmouseover="mouse(this)" id="click_5">文件夹管理</a>
<a href="#" class="hover_3" onmouseover="mouse(this)" id="click_5">文件夹管理</a>
<a href="#" class="hover_3" onmouseover="mouse(this)" id="click_5">文件夹管理</a>
</div>
.css样式
View Code
a{text-decoration:none}
a:hover{text-decoration:none;}
.main{ width:1000px; height:25px; margin:10px auto 0; border-bottom:6px solid #52acd1;}
.blue{ width:109px; height:25px; float:left;}
a.hover_1{ width:109px; height:25px; float:left; background:url(title_hover.png) no-repeat; z-index:100; position:relative; text-align:left; padding:5px 0 0 8px;color:#fff; font-size:13px; font-weight:bold;}
a.hover_2{width:109px; height:25px; float:left; background:url(title.png) no-repeat; z-index:10; position:relative; margin-left:-20px; text-align:left; padding:5px 0 0 8px; color:#000; font-size:13px; font-weight:bold;}
a.hover_3{width:109px; height:25px; float:left; background:url(title.png) no-repeat; z-index:10; position:relative; text-align:left; padding:5px 0 0 8px;color:#000; font-size:13px; font-weight:bold;}
a.hover_4{width:109px; height:25px; float:left; background:url(title_hover.png) no-repeat; z-index:100; position:relative; margin-left:-20px; text-align:left; padding:5px 0 0 8px; color:#fff; font-size:13px; font-weight:bold;}
用到的栏目背景图片
