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>
  • 相关阅读:
    如何在Docker中部署一个可以被外部访问的Apollo配置中心
    ELK+Filebeat日志中心搭建(一)——ElasticSearch7.3.1安装
    零基础配置Hadoop集群——Ambari安装及配置详解
    【转】CSS中position属性( absolute | relative | static | fixed )详解
    浅谈JavaScript中的call和apply
    js 获取某年的某天是第几周
    IE回车的怪异行为
    面向对象的三大特性
    错误175:指定的存储区提供程序在配置中找不到,或者无效 一些感想
    postgresql12.5 windows版安装
  • 原文地址:https://www.cnblogs.com/wanglinglong/p/7055062.html
Copyright © 2011-2022 走看看