包括iframe点击jquery选项卡

Include iframe on click of jquery tab?

本文关键字：选项 jquery 点击 iframe 包括      更新时间：2023-09-26

我有以下代码:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style type="text/css"/>
  ul.tabs {
    float:left;
    list-style:none;
    height:22px;
    width:100%;
    border-radius:8px 0 -50px 0;
    margin:0;
    padding:0;
}
ul.tabs li {
    float:left;
    height:21px;
    line-height:21px;
    border:1px solid #999;
    overflow:hidden;
    position:relative;
    background:#ADD8E6;
    -webkit-border-top-left-radius:8px;
    -webkit-border-top-right-radius:8px;
    -moz-border-radius-topleft:8px;
    -moz-border-radius-topright:8px;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    margin:0 2px -1px 0;
    padding:0;
}
ul.tabs li a {
    text-decoration:none;
    color:#000;
    display:block;
    font-size:1em;
    border:1px solid #fff;
    outline:none;
    -webkit-border-top-left-radius:8px;
    -webkit-border-top-right-radius:8px;
    -moz-border-radius-topleft:8px;
    -moz-border-radius-topright:8px;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    padding:0 20px;
}
ul.tabs li a:hover {
    background:#ADD8E6;
}
html ul.tabs li.active,html ul.tabs li.active a:hover {
    background:#fff;
    border-bottom:1px solid #fff;
}
.tabContainer {
    border:1px solid #999;
    overflow:hidden;
    clear:both;
    float:left;
    width:100%;
    background:#fff;
    -webkit-border-radius:8px;
    -webkit-border-top-left-radius:0;
    -moz-border-radius:8px;
    -moz-border-radius-topleft:0;
    border-radius:8px;
    border-top-left-radius:0;
}
.labelStyle{
  font-weight:bold;
  font-size:1.5em
}
.tabContent {
    font-size: 12px;
    padding:20px;
}
.chkAlign{
    margin-left:143px
}

  </style>
  <script>
  $(document).ready(function() {
        //hiding tab content except first one
        $(".tabContent").not(":first").hide();
        // adding Active class to first selected tab and show
        $("ul.tabs li:first").addClass("active").show(); 
        // Click event on tab
        $("ul.tabs li").click(function() {
            // Removing class of Active tab
            $("ul.tabs li.active").removeClass("active");
            // Adding Active class to Clicked tab
            $(this).addClass("active");
            // hiding all the tab contents
            $(".tabContent").hide();       
            // showing the clicked tab's content using fading effect
            $($('a',this).attr("href")).fadeIn('slow');
            return false;
        });

});
  </script>
</head>
<body>
<ul class="tabs">
   <li><a href="#tab1">SEO</a></li>
   <li><a href="#tab2">Attributes</a></li>
   <li><a href="#tab3">Classification SIC</a></li>
</ul>
<div class="tabContainer">
   <div id="tab1" class="tabContent">
    <iframe style="width:90%" src=" http://10.204.66.70:8080/myApp/myUI.do?geo=us&tab=sic&gid=138370"></iframe>
   </div>
   <div id="tab2" class="tabContent">
    <iframe style="width:90%" src=" http://10.204.66.70:8080/myApp/myUI.do?geo=us&tab=some&gid=235"></iframe>
   </div>
    <div id="tab3" class="tabContent">
    <iframe style="width:90%" src=" http://10.204.66.70:8080/myApp/myUI.do?geo=uk&tab=sic&gid=789"></iframe>
   </div>
</div>

</body>
</html>

在每个选项卡的点击，我需要渲染一些页面在一个iframe。但是上面的代码不工作。我做错什么了吗?

我该怎么做?

首先可能是iframe发送的标题是X-Frame-Options，因此网站拒绝在iframe中响应。

你的url似乎是错误的，在SRC和网站的端口的双引号后面加一个/

尝试用本地文件替换您的地址。你的代码应该可以工作了

相关文章：