Question

我的代码如下。

<!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">
    //some static content
   </div>
   <div id="tab2" class="tabContent">
    //some static content
   </div>

    <div id="tab3" class="tabContent">
    //here i need to get the page and render 
   </div>

</div>


</body>
</html>

现在点击tab3，我必须嵌入页面

http://10.100.12.145:8080/somePage/123

我该怎么做？

Answer 1

您可以轻松实现这一目标;

$(/* selector */).on('click', function() {
    $.ajax({
        url: 'http://10.100.12.145:8080/somePage/123',
        success: function (response) {
            // add response to the container you want: $(/* selector */).html(response);
        }
    });
});

在jquery选项卡上包含/调用另一个页面单击？

1 个答案: