zoukankan      html  css  js  c++  java
  • (转)简洁常用的栏目切换js.可以直接使用

    原文地址:http://www.cnblogs.com/liguanghui/archive/2011/11/02/2233293.html

    简单的常用栏目切换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{ 1000px; height:25px; margin:10px auto 0; border-bottom:6px solid #52acd1;}
    .blue{ 109px; height:25px; float:left;}
    a.hover_1{ 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{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{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{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;}


    用到的栏目背景图片

  • 相关阅读:
    215. Kth Largest Element in an Array
    214. Shortest Palindrome
    213. House Robber II
    212. Word Search II
    210 Course ScheduleII
    209. Minimum Size Subarray Sum
    208. Implement Trie (Prefix Tree)
    207. Course Schedule
    206. Reverse Linked List
    sql 开发经验
  • 原文地址:https://www.cnblogs.com/fcsh820/p/2233352.html
Copyright © 2011-2022 走看看