在 jQuery UI 选项卡中加载内容时出现问题答案

【问题标题】：Problem loading content within a jQuery UI tab在 jQuery UI 选项卡中加载内容时出现问题
【发布时间】：2013-06-12 01:25:22
【问题描述】：

它今天早些时候工作...：S 但是现在，每当我单击选项卡中的链接时，它都会在一个全新的页面中打开，无论选项卡内容是嵌入在当前页面中还是从另一个页面中引用.

这是我的代码，提前致谢！

<link rel="stylesheet" href="style/style.css" media="screen,projection" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>
<!--  <script src="js/jquery.min.js" type="text/javascript"></script>
  <script src="js/jquery-ui.min.js" type="text/javascript"></script>-->
    <script type="text/javascript">
  $(document).ready(function() {
    $("#tabs").tabs();
  });
  </script>

<!----Javascript edited in below----->
      <script type="text/javascript">
  $('#payday').tabs({
    load: function(event, ui) {
        $('a', ui.panel).click(function() {
            $(ui.panel).load(this.href);
            return false;
        });
    }
}); 
</script>
</head>

<body>
    <div id="wrapper">
        <div id="container">
            <div id="header">
                <div id="headercon">
                </div><!--headercon-->
                <div class="clear"></div>
            </div><!-- header -->

            <div id="tabs">
            <div id="navigation">

                    <ul>
                        <li class="selected"><a href="#nav1"><span>nav1</span></a></li>
                        <li><a href="form2.php"><span>nav2</span></a></li>
                        <li><a href="form3.php"><span>nav3</span></a></li>
                    </ul>

                <div class="clear"></div>
            </div><!-- navigation -->

            <div id="info">
            <div class="top"></div>
            <div id="payday" class="middle">
<h3>Get a quick quote NOW! <a href="form2.php">google</a></h3>
<div class="information">
<form action="ajax.php" id="submit" method="post">
<p class="enter"><span>Email address:</span><br><input id="email" class="email" type="text" name="email" value="Enter your email" input onclick="this.value='';" /></p>
<p class="date"><span>Date of birth:</span><br><input id="dd" class="day" type="text" name="dd" value="DD" input onclick="this.value='';"/><input id="mm" class="month" type="text" name="mm" value="MM" input onclick="this.value='';"/><input id="yyyy" class="year" type="text" name="yyyy" value="YYYY" input onclick="this.value='';"/></p>
<p class="submit"><input class="button" type="submit" value="" /></p>
</form>
<div class="clear"></div>
</div><!--information-->
<div class="success" style="display: none;">added.</div>  
<div class="clear"></div>
</div>
                    <div class="clear"></div>
                </div><!--middle-->
                                <div class="clear"></div>
            </div><!-- navigation -->

【问题讨论】：

我们需要更多信息。你的 JavaScript 是什么样的？
你能检查你的版本控制历史，看看你改变了什么？
糟糕，不小心漏掉了。我已经编辑了帖子并将其重新添加。现在有什么想法吗？谢谢！ :)
马丁尼奥，我该怎么做？ [请注意，今天已经编辑了很多。我不确定这有多大帮助:( ]
“请注意，今天已经编辑了很多。” - 您使用的是源代码控制，对吧？

标签： jquery html ajax jquery-ui tabs

【解决方案1】：

在链接中包含的代码中，您在发薪日缺少#：

<script type="text/javascript">
$('#payday').tabs({ // <<< see here
    load: function(event, ui) {
        $('a', ui.panel).click(function() {
            $(ui.panel).load(this.href);
            return false;
        });
    }
});
</script>

但是，我没有遇到任何关于标签的出现问题或页面转到链接的问题。我用的是FF4。

您使用.tabs() 加载此类内容的方法存在缺陷。只需使用.load() 或.get()。

例子：

<html>
<head>
<style type="text/css">

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $('#single a').click(function(e){
        $('#target').load(this.href);
        return false;
    });
});

</script>
</head>
<body>
<div id="single">
    <a href="files/test1.php">Test 1</a>
    <a href="files/test2.php">Test 2</a>
    <a href="files/test3.php">Test 3</a>
</div>
<div id="target"></div>
</body>
</html>

接下来您需要处理加载内容中的链接。例如：

$(document).ready(function(){
    setLink('single');
});

function setLink(id){
    $('#'+id+' a').click(function(e){
        $('#target').load(
            this.href,
            function(){
                setLink('target');
            }
        );
        return false;
    });
}

见http://jfcoder.com/test/load.php。

编辑 2

加载列表中的第一个A链接onDOMReady（而不是onLoad）：

<html>
<head>
<style type="text/css">

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    setLink('single');
    $('#target').load($('#single a:first').attr('href'));
});

function setLink(id){
    $('#'+id+' a').click(function(e){
        $('#target').load(
            this.href,
            function(){
                setLink('target');
            }
        );
        return false;
    });
}

</script>
</head>
<body>
<div id="single">
    <a href="files/test1.php">Test 1</a>
    <a href="files/test2.php">Test 2</a>
    <a href="files/test3.php">Test 3</a>
</div>
<div id="target"></div>
</body>
</html>

另见http://jfcoder.com/test/load.php。

【讨论】：

啊，很高兴注意到这一点。我只是改变了它，它仍然不起作用:(是的，标签通常工作正常，但我需要在不离开页面的情况下打开发薪日标签中的链接，因为这样我就可以制作表单提交工作。有什么想法吗？为帮助干杯！:)
哇，太棒了，它从我的 css 中删除了数百行代码：D 我已经添加了它。我不知道我是否做错了，但它仍然在新标签页中打开链接:(对不起，很烦人。
@eoJ - 查看我的编辑。我的猜测是您没有在加载的内容中设置链接。
太棒了，它成功了！我认为是我将目标 div 放在了错误的位置。非常感谢！ :D 只是想知道，我如何让它加载目标 onload 中的第一页？非常感谢您提供的解决方案，这真是太棒了:)
@eoJ - 查看我的编辑。您想在 DOMReady 上执行此操作，因为您需要先加载页面。

【解决方案2】：

你关闭了#navigation div，但你没有关闭#tabs div？还是我错了？

【讨论】：

啊，抱歉，没有包括在内。我确实关闭了它，但
就在最后一个下方。不过谢谢:)