Question

我有以下html / php代码。在单击任何选项卡链接时，文件内容未加载到特定的<div>标记中。

PHP代码：

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

  ul.tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
  ul.tabs li { display: inline; }
  ul.tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.4em 2.5em 0.3em 2.5em; border-radius : 5px 5px 0 0; }
  ul.tabs li a:hover { background-color: #f1f0ee; }
  ul.tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
  div.tabContent {border: 1px solid #c9c3ba; border-top : none; padding: 0.5em; background-color: #f1f0ee; border-radius: 0 0 5px 5px}
  div.tabContent.hide { display: none; }

  .tabs a {
            padding:5px 10px;

            background:#D8D8D8;
            color:#fff;
            text-decoration:none;
        }

        .tabs a.active {
            background:#f1f0ee ;
            color:black ;
            font-weight:bold;
        }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

</head>
 <body>
  <ul class='tabs'>
  <li><a href="#desktop" >Desktop</a></li>
  <li><a href="#laptop">Laptop</a></li>
  </ul>

<div class="tabContent" id="desktop">
 </div>
<div class="tabContent" id="laptop">
</div>
</body>
</html>

jQuery代码：通过这个外部jQuery文件，我希望每当我点击链接时，所需文件都会加载到特定的<div>标记中。

$(document).ready(function() {    
    var hideid = "#laptop";
    var showid = "#desktop";   
    $(hideid).hide();
    $('a[href="' + showid + '"]').addClass("active");
    $('a[href="#laptop').click(function() {
        $(this).addClass('active');
        $('#laptop').show('slow');
        $('#desktop').hide('slow');
        $('a[href="#desktop"]').removeClass("active");
        $("#laptop").load("laptop.html");
    });

    $('a[href="#desktop').click(function() {
        $("#desktop").load("/test.html");
        $(this).addClass('active');
        $('#desktop').show('slow');
        $('#laptop').hide('slow');
        $('a[href="#laptop"]').removeClass("active");
        $("#desktop").load("desktop.html");
    });
});

代码有什么问题？

Answer 1

$('a[href="#desktop').click(function () {

引号错误。

Answer 2

看起来问题出在这一行，

$("#desktop").load("/test.html");

如果test.html在同一目录中，请尝试删除/.

使用jquery ajax的load（）无法显示内容

2 个答案: