zoukankan      html  css  js  c++  java
  • jquery 显示隐藏切换

    juqery 显示隐藏    <SCRIPT src="D:/jquery.min.js" type=text/javascript></SCRIPT> 我用的是1.4.3版本,跟换自己的js

    <!DOCTYPE html> 
    <html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
        <title>视频</title> 
    
    
    <SCRIPT src="D:/jquery.min.js" type=text/javascript></SCRIPT>
    
    
    <SCRIPT  language="javascript">
    
    $(document).ready(function() { 
            $("h1").next("span").css("display","none");
            $("h2").next("ul").css("display","none");
            
            $("a").click(function(){
                var filepath;
                filepath = $(this).parent().parent().prev().parent().prev().text();
                if(filepath==""){return;}
                filepath = filepath +"/" + $(this).parent().parent().prev().text();
                filepath = filepath +"/" + $(this).text();
                showflashdiv(filepath);
            });
    
            $("h1").click(function(){
                //设置除了选中其它的h1下的span都隐藏
                $(this).siblings().next("span").css("display","none");
    
                var jspan = $(this).next("span");
                if(jspan.css("display")=="none"){
                    jspan.css("display","block");
                }else{
                    jspan.css("display","none");
                }
            });
            
            $("h2").click(function(){
                var jul = $(this).next("ul");
                if(jul.css("display")=="none"){
                    jul.css("display","block");
                }else{
                    jul.css("display","none");
                }
            });
        });          
    
    </SCRIPT>
    <style> 
            *,body,ul,li,h1,h2 { 
        margin: 0; 
        padding: 0; 
        list-style: none; 
    } 
    body { 
        font: 12px "宋体"; 
        padding-top: 20px; 
    } 
    #menu {
         z-index:1;
            padding_left:200; 
             width: 200px; 
            margin: auto; 
    } 
    #menu h1 { 
        cursor: pointer; 
        color:  #191970; 
        font-size: 12px; 
        padding: 5px 0 3px 10px; 
        border: #C60 1px solid; 
        margin-top: 1px; 
        background-color: #E0FFFF; 
    } 
    #menu h2 { 
        cursor: pointer; 
        color: #777; 
        font-size: 12px; 
        padding: 5px 0 3px 10px; 
        border: #E7E7E7 1px solid; 
        border-top-color: #FFF; 
        background-color: #F4F4F4; 
    } 
    #menu ul { 
        padding-left: 15px; 
        height: 100px; 
        border: #E7E7E7 1px solid; 
        border-top: none; 
        overflow: auto; 
    } 
    #menu ul li { 
        padding: 5px 0 3px 10px; 
    }</style> 
    </head> 
    
    <body> 
    <div id="menu"> 
    <h1>2015</h1> 
       <span> 
       <h2 >1</h2> 
       <ul> 
        <li><a href="#" >01.wmv</a></li> 
        <li><a href="#" >02.wmv</a></li> 
        <li><a href="#" >03.wmv</a></li> 
        <li><a href="#" >04.wmv</a></li> 
        <li><a href="#" >05.wmv</a></li> 
       </ul> 
       <h2>2</h2> 
       <ul> 
       <li><a href="#" >00163.wmv</a></li> 
        <li><a href="#" >00164.wmv</a></li> 
        <li><a href="#" >00165.wmv</a></li> 
       </ul> 
       <h2>3</h2> 
       <ul> 
        <li><a href="#" >01.wmv</a></li> 
        <li><a href="#" >02.wmv</a></li> 
       </ul> 
       <h2>4</h2> 
       <ul> 
        <li><a href="#" >01.wmv</a></li> 
        <li><a href="#" >02.wmv</a></li> 
        <li><a href="#" >03.wmv</a></li> 
       </ul>            
       <h2>5</h2> 
       <ul> 
        <li><a href="#"  >01.wmv</a></li> 
        <li><a href="#"  >02.wmv</a></li> 
        <li><a href="#"  >03.wmv</a></li> 
        <li><a href="#"  >04.wmv</a></li> 
        <li><a href="#"  >05.wmv</a></li> 
        <li><a href="#"  >06.wmv</a></li> 
       </ul>   
       <h2>6</h2> 
       <ul> 
        <li><a href="#" >01.wmv</a></li> 
        <li><a href="#" >02.wmv</a></li> 
        <li><a href="#" >03.wmv</a></li> 
       </ul> 
    </span> 
    <h1>2016</h1> 
       <span> 
       <h2 >1</h2> 
       <ul> 
    <li><a href="#" >00000.wmv</a></li>
    <li><a href="#" >00026.wmv</a></li> 
    <li><a href="#" >00027.wmv</a></li> 
    <li><a href="#" >00028.wmv</a></li> 
       </ul> 
       <h2 >2</h2> 
       <ul> 
        <li><a href="#" >00036.wmv</a></li>                                                   
        <li><a
    href="#">00037.wmv</a></li>                                                
        <li><a href="#" >00038.wmv</a></li>
                                                           
       </ul> 
     </span> 
    </div>
    </body> 
    </html>
  • 相关阅读:
    什么是PV UV PR值
    手工测试了各个搜索引擎对博客文章的收录
    Linux 常用命令
    部分linux命令详解
    左右滑屏的实现
    网络资源下载时断点续传的实现
    MYSQL5.5.37win32.msi 这个版本得程序包谁有吗 可以给我一下吗?
    Linux(CentOS6.5) 开放端口,配置防火墙
    centos7 下出现 yum list 报错 还有yum groupolist 查询软件组列表报错
    linux命令(1):ls命令
  • 原文地址:https://www.cnblogs.com/wanglinglong/p/7055062.html
Copyright © 2011-2022 走看看