jQuery的.load方法帮助

Question

我有一个页面，它的内容已经在选项卡内，不想在选项卡内使用另一个选项卡。 #content div 顶部将有4个年份2010、2009、2008、2007作为锚点。当您单击一年时，应该通过jQuery的ajax加载功能将特定内容加载到div#content中。这很容易。是否可能创建一个点击函数，隐藏当前可见的内容并显示适当的内容？

 $("a#foo").click(function(){
    $("#Year10").load("2010.php #content");
    $("#Year09, #Year08, #Year07").hide();
  });

我想问的是，是否可以隐藏当前在#content div中的任何内容并显示相应的div？如果将内容作为外部页面或在加载时隐藏的div，则会更好吗？

谢谢。

- Dirty Bird Design

Answer 1

不错，你走在正确的道路上。

假设你有这样的链接

<ul id="menu">
    <li><a href="2010.php">2010</a></li>
    <li><a href="2009.php">2009</a></li>
    <li><a href="2008.php">2008</a></li>
</ul>

还有一个内容div

<div id="content"></div>

你只需要编写一个简单的jQuery函数。

$("#ul#menu li a").click(function(e) {
    // Prevent going to the page
    e.preventDefault();

    // store the parent (li)
    var $parent = $(this).parent();

    // add class of selected on parent li, and remove it from any other elements
    $parent.addClass("selected").siblings().removeClass("selected");

    // get href
    var href = $(this).attr('href');

    $("#content").load(href + " #content", function() {
        // do something after content is loaded.
    });
});

- Marko

---

@Marko - 我无法将内容加载到 div 中，它只会在另一个页面中打开。 - Dirty Bird Design

嗨@Dirty Bird Design：我注意到我忘记了放置e.preventDefault()以防止跳转页面，现在我已更新上面的代码。根据jQuery文档，href和content id之间应该有一个空格（即example.com #content）。你的示例中是否不是这种情况？ - Marko

嗨@Marko - return false / e.preventDefault()（我承认我不知道哪个更好）似乎起了作用。我会再试一次加上空格，我把它移除后在FF中它可以工作，这可能是由于return false();所致，而删除空格可能导致它在IE中无法工作。我必须使用.get来使其在IE中工作。您是否曾经遇到过在IE中使用.load的问题？到目前为止，我还没有。至于空格，我是指这里的空格“space#content”。 - Dirty Bird Design

@Marko，我已添加了空格，但它仍会触发警报，但不会添加任何内容。 - Dirty Bird Design

好的，最后再试一件事。在每个href前面添加一个斜杠，这样它看起来像/AJAX/2010PR.html，并删除选择器后面的任何尾随空格。href + " .schedule "应该是href + " .schedule"。 - Marko

Answer 2

我会给选项卡添加一个 .active 类，并指定名称（比如说 2010）属性。

$(".tab").click(function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
    $(this).load($(this).attr("name") + ".php");
});

然后针对 .active 进行 CSS 映射，以表示可见性，否则 .tab 就是 display: none;。

- Josh K

---

因此，使用它需要加载的内容与链接具有相同的名称（减去扩展名），并且这些将是同一页上隐藏的div，对吗？ - Dirty Bird Design