Question

今天早些时候工作......：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 -->

Answer 1

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

Answer 2

在您的链接中包含的代码中，您错过了发薪日的#：

<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。

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

2 个答案: