• (转)简洁常用的栏目切换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;}


    用到的栏目背景图片

  • 相关阅读:
    MFC单文档视图设置背景
    原来这就是命令行下的“学生信息管理系统”
    C语言中数组&取地址的问题
    《逐梦旅程-Windows游戏编程之从零开始》 勘误
    杭电ACM 1003 ( 动态规划法 水题)
    《编程之美》
    [蓝桥杯][2014年第五届真题]地宫取宝
    [蓝桥杯][2013年第四届真题]危险系数
    2142: 逛超市(zznuoj)
    2141:2333(zznuoj)
  • 原文地址:https://www.cnblogs.com/fcsh820/p/2233352.html
Copyright © 2020-2023  润新知