Question

我是jquery的新手。我正在使用jquery选项卡，但面临一些问题。

我的要求是：当我点击tab1时，它应该打开tab1.php（默认情况下）当我点击tab2时，它应该打开tab2.php等。

但它不能正常工作。有人可以帮我吗？

以下是我的代码：

Tab1.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <title>jQuery UI Example Page</title>

  <link  href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/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>

    <script> 
    $(document).ready(function() {
        $('#example').tabs();                
    });
    </script>
    </head>

    <body>

    <div id="example">
         <ul>
             <li><a href="tab1.php"><span>Content 1</span></a></li>
             <li><a href="tab2.php"><span>Content 2</span></a></li>

         </ul>
    </div>
         <h1> tab1 </h1>
    </body>
    </html>

Tab2.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>

<link  href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/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>

<script> 
$(document).ready(function() {
    $('#example').tabs();                
});
</script>
</head>

<body>

<div id="example">
     <ul>
         <li><a href="tab1.php"><span>Content 1</span></a></li>
         <li><a href="tab2.php"><span>Content 2</span></a></li>
     </ul>
</div>
<h1> tab2 </h1>
</body>
</html>

Answer 1

$(document).ready(function() {
    $('#showPageContent').load('tab.php');
    $('#example').tabs({
        select: function(event, ui) {
       $('#showPageContent').load($(ui.tab).attr('shpwpage'));
    }

    });                 
});

<强> DEMO

Answer 2

尝试：

$("#example").tabs({
    select: function(event, ui) {
       window.location = $.data(ui.tab, 'href.tabs');
       $("#example").tabs("url" , indexOfTheTab , newUrl );
    }
});

Answer 3

我对你的html进行了一些更改，以便这个例子可以工作：

<div id="example">
    <ul>
        <li><a href="#" url="http://www.example.com"><span>Example</span> </a> </li>
        <li><a href="#" url="http://www.ebay.com"><span>Ebay</span></a> </li>
        <li><a href="#" url="http://www.jquery.com"><span>JQuery</span></a></li>
    </ul>
    <iframe id="showPageContent" src="" style="width:100%;border:0px;height:300px;"></iframe>
</div>

查看有效的FIDDLE

基本上我创建了一个用于加载不同页面的iframe

<iframe id="showPageContent" src="" style="width:100%;border:0px;height:300px;"></iframe>

然后在准备好文档时，我添加了一个onchange处理程序来加载所选标签的URL属性

$(document).ready(function () {
    var firstLoad=1;
    var tabs = $('#example').tabs({
        activate: function (event, ui) {

            var active = $("#example").tabs("option", "active");
            var url = $("#example ul>li a").eq(active).attr('url');
            $('#showPageContent').attr('src', url);

        },
        load: function (event, ui) {
            if(firstLoad==1){
                var url = $("#example ul>li a").first().attr('url');
                $('#showPageContent').attr('src', url);
                firstLoad=0;
            }
        }
    });
});

第一次加载也在load()函数

中处理

Jquery Tabs无法正常工作

3 个答案: