iframe 与简单的 tab

<script type="text/javascript">
        $().ready(function () {
            $(function () {
                $("#tabUl li:first").addClass("active");
                $("#tabUlb div:gt(0)").hide();
                $("#tabUl li").click(function () {
                    $(this).addClass("active").siblings("li").removeClass();
                    $(".tab div.tab_content:eq(" + $(this).index() + ")").show().siblings("div").hide();
                });
            });
        });  
    </script>

 

<style>

 .tab #tabUl, li { margin:0px; padding:0px; list-style:none; text-align:left;}    
 .tab #tabUl li { display: inline-block; zoom: 1; *display: inline;  color:#444; text-align:center; padding:1px 10px; cursor:pointer;border-bottom:solid 3px #eee;}    
 .tab  #tabUl .active{ color:Red; border-bottom:solid 3px red;text-align:center; padding:1px 10px; cursor:pointer;}   
 .tab_content { text-align:left; padding-top:20px; }
 

</style>

 <ul id="tabUl">
       
<li>产品简介</li>

<li>规格参数</li>

<li>套装详情</li>

<li>操作指南</li>

</ul>

<div class="tab_content"></div>

<div class="tab_content"></div>

<div class="tab_content"></div>

<div class="tab_content"></div>

</div>

 

  <iframe src="" id="Iframe" frameborder="0" scrolling="no" style="border:0px;width:100%;" onload="autoHeight();"></iframe>

 

<script type="text/javascript">
    function autoHeight() {
        var iframe = document.getElementById("Iframe");
        if (iframe.Document) {//ie自有属性
            iframe.style.height = iframe.Document.documentElement.scrollHeight;
        } else if (iframe.contentDocument) {//ie,firefox,chrome,opera,safari
            iframe.height = iframe.contentDocument.body.offsetHeight;
        }
    }
</script>

 

 $(function () {

        $("#Iframe").attr("src", "/products/X11.htm");

                  autoHeight();

        });
    })