$(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>