问答详情
源自：3-13 编程练习

比较蛮笨的方法，但效果和描述是一样的。

比较蛮笨的方法，但效果和描述是一样的。

提问者：追梦人物 2015-07-19 20:36

个回答

  • 数理强强
    2015-07-25 11:54:53

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>挑战题</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    </head>
    
    <body>
        <ul>
         <li class="l" style="display:none">0001</li>   
         <li >0010</li>           
         <li class="l" style="display:none">0011</li>   
         <li >0100</li>   
         <li class="l" style="display:none">0101</li>   
         <li >0110</li>
         <li class="l" style="display:none">0111</li>   
         <li >1000</li>           
         <li class="l" style="display:none">1001</li>   
         <li >1010</li>
         </ul>
         <a class="a" style="display:" href="javascript:;" title="点击“更多”链接时,自身内容变为“简化”,同时,<ul>元素中显示全部的<li>元素.">更多</a>
         <a class="b" style="display:none" href="javascript:;" title="点击“简化”链接时,自身内容变为“更多”,同时<ul>元素中仅显示包含最后一个<li>元素在内的5个元素.">简化</a>
            <script>
                $(".a").click(function(){
                $(".l").css("display","");
                $("li").css("background","red");
                $(".a").css("display","none");
                $(".b").css("display","");
                });
                $(".b").click(function(){
                $(".l").css("display","none");
                $("li").css("background","yellow");
                $(".a").css("display","");
                $(".b").css("display","none");
                });
            </script>

    </body>
</html>


    0
  • 数理强强
    2015-07-25 11:54:25

    <!DOCTYPE html>

    <html>

        <head>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

            <title>挑战题</title>

            <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

        </head>

        

        <body>

            <ul>

             <li class="l" style="display:none">0001</li>   

             <li >0010</li>           

             <li class="l" style="display:none">0011</li>   

             <li >0100</li>   

             <li class="l" style="display:none">0101</li>   

             <li >0110</li>

             <li class="l" style="display:none">0111</li>   

             <li >1000</li>           

             <li class="l" style="display:none">1001</li>   

             <li >1010</li>

             </ul>

             <a class="a" style="display:" href="javascript:;" title="点击“更多”链接时,自身内容变为“简化”,同时,<ul>元素中显示全部的<li>元素.">更多</a>

             <a class="b" style="display:none" href="javascript:;" title="点击“简化”链接时,自身内容变为“更多”,同时<ul>元素中仅显示包含最后一个<li>元素在内的5个元素.">简化</a>

                <script>

                    $(".a").click(function(){

                    $(".l").css("display","");

                    $("li").css("background","red");

                    $(".a").css("display","none");

                    $(".b").css("display","");

                    });

                    $(".b").click(function(){

                    $(".l").css("display","none");

                    $("li").css("background","yellow");

                    $(".a").css("display","");

                    $(".b").css("display","none");

                    });

                </script>


        </body>

    </html>


    0