$( function(){
             var dic = new ActiveXObject( "Scripting.Dictionary");
            dic.Add( "home", "http://www.baidu.com");
      dic.Add("contact","http://www.mtime.com");
      dic.Add("about","http://tuoxie174.blog.51cto.com");
            // 透明度-css
      $("#about-button").css({
        opacity: 0.3
      });
      $("#contact-button").css({
        opacity: 0.3
      });
            // 按钮事件处理
      $("#page-wrap div.button").click(function(){
        
        $clicked = $(this); // 获得当前执行对象
        
        // if the button is not already "transformed" AND is not animated
        if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
          
          $clicked.animate({
            opacity: 1,
            borderWidth: 5
          }, 600 );
          
          // each button div MUST have a "xx-button" and the target div must have an id "xx"
          var idToLoad = $clicked.attr("id").split('-');
          
          //we search trough the content for the visible div and we fade it out
          $("#content").find("div:visible").fadeOut("fast", function(){
            //once the fade out is completed, we start to fade in the right div
            $(this).parent().find("#"+idToLoad[0]).fadeIn();
          })
          
          $("#ifr").attr("src",dic(idToLoad[0]));
        }
        
        //we reset the other buttons to default style
        $clicked.siblings(".button").animate({
          opacity: 0.5,
          borderWidth: 1
        }, 600 );
        
      });
    });

html：
< div id ="page-wrap" >
    
     < div id ="home-button" class ="button" >
       < img src ="p_w_picpaths/menu-home.png" alt ="home" class ="button" />
     div>
     < div id ="about-button" class ="button" >
       < img src ="p_w_picpaths/menu-about.png" alt ="about" class ="button" >
     div>

     < div id ="contact-button" class ="button" >
       < img src ="p_w_picpaths/menu-contact.png" alt ="contact" class ="button" >
     div>
    
     < div class ="clear" > div>
    
     < div id ="content" >
      
       < div id ="home" >
         < p >This content is for home. p>
       div>
      
       < div id ="about" >

         < p >This content is for about. p>
       div>
      
       < div id ="contact" >
         < p >This content is for contact. p>
        
       div>
     div>
   div>
  
   < div >
     < iframe id ="ifr" name ="ifr" width ="99.7%" height ="380px" src ="http://www.baidu.com" > iframe>
   < div >