簡潔常用的欄目切換js.可以直接使用 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

 

簡單的常用欄目切換js.還不知道怎麼上傳文件呢.有點鬱悶

直接貼代碼.html

       <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>

<p 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>

</p>

 

 

.css樣式

 

 

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

			


用到的欄目背景圖片

 

 

作者 Sampson

 

發佈留言