带iframe的tab切换效果

.menu{
    height:35px;
    line-height:32px;
    padding-top:1px;
    width:600px;
    position:absolute;
    left: 200px;
    top: -37px;
}
.menu a{display:inline-block; height:31px; line-height:31px; width:138px; text-align:center; font-size:18px; color:#ffd200; font-weight:bold;}
.menu a:hover, .menu a.on{text-decoration:none;  background:url(images/menu.jpg) no-repeat;}
.cnt{
    width:900px;
    height:576px;
    position:absolute;
    left: 51px;
    top: 21px;
}   



 <div class="menu">
          <a href="javascript:void(0)" dawang="scroll_01.htm" class="on">A</a>
          <a href="javascript:void(0)" dawang="scroll_02.htm">B</a>
          <a href="javascript:void(0)" dawang="scroll_03.htm">C</a>
          <a href="javascript:void(0)" dawang="scroll_04.htm">D</a>
       </div>
       <div class="cnt">
         <iframe src="scroll_01.htm" width="900" height="576" frameborder="0" scrolling="no">   
         </iframe>
       </div>
    
      
<script type="text/javascript">

            $(".menu a").click(function(){
                    $(this).addClass("on").siblings().removeClass("on");
                    $(".cnt iframe").attr("src",$(this).attr("dawang"));
                    
            })                           

</script>

转载于:https://www.cnblogs.com/danydong/p/6054584.html