没事又写了个蛋疼的网页|程序设计 - 精英盒子

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

  <script>
   $(document).ready(function(){
    $(".test1").click(function(){
     $("#test2").hide();
     $("#about").hide();
     $("#test1").show(1000);
    });
    $(".test2").click(function(){
     $("#test1").hide();
     $("#about").hide();
     $("#test2").show(1000);
    });
    $(".about").click(function(){
     $("#test2").hide();
     $("#test1").hide();
     $("#about").show(1000);
    });
   });
  </script>

  <style>
   a{color:#0010D0;}
   a:hover{color:green;)
  </style>

</head>
<body style="text-align:center;font-family:sans-serif, serif;">
  <div style="border:1px solid gray;margin:20px auto;width:600px;height:350px;">
   <div style="margin:auto;width:580px;height:334px;">
    <h1 style="margin-top:8px;font-weight:500;word-spacing:3px;">Test</h1>
    <span style="height:50px;"></span>
    <a class="test1" style="margin-right:120px;" href="#">Test1</a>
    <a class="test2" style="margin-right:120px;" href="##">Test2</a>
    <a class="about" href="###">About</a>
    <br/><hr/>
    <div id="test1" style="display:none;text-align:left;">
     <button class="hide">Hide it!</button> <button class="show">You can show it again.</button>
     <br/>
     <button class="fout">fadeOut it.</button> <button class="fin">fadeIn it.</button>
     <br/>
     <p class="text" style="display:inline;">TextTextTextTextText.</p>
     <script>
      $(".hide").click(function(){    $(".text").hide(1000);    });    $(".show").click(function(){    $(".text").show(1000);    });    $(".fin").click(function(){    $(".text").fadeIn(1000);    });    $(".fout").click(function(){    $(".text").fadeOut(1000);    });
    </script>
    </div>
    <div id="test2" style="display:none;text-align:left;">
     <p>Test2: animate.</p><br/>
     <button class="anim1" style="width:150px;">Begin animate.</button> <button class="anmi2">Animate 2nd.</button>
     <br/>
     <div class="text2" style="width:50px;height:50px;background-color:#98bf21;position:relative;"></div>
     <script>
      $(".anim1").click(function(){    $(".text2").animate({height:150},"slow");    $(".text2").animate({width:150},"slow");    $(".text2").animate({height:50},"slow");    $(".text2").animate({width:50},"slow");    });    $(".anmi2").click(function(){    $(".text2").animate({left:300},"slow");    $(".text2").animate({left:0},"slow");    });
     </script>
    </div>
    <div id="about" style="display:none;text-align:left;">    This is a test Html file. It uses a lot of language, like 'HTML', 'CSS' and 'jQuery' (In fack, it is JavaScript. )<br/>    Author: <span title="Simple_Cxy">Scxy</span><br/>    Createed Date: June 22nd.
    </div>
   </div>
  </div>
</body>
</html>