Question

我的页面内容已经在选项卡中，并且不想在选项卡中使用选项卡。 2010年，2009年，2008年，2007年将是#content div顶部的锚点。单击一年时，它应该通过jQuery的ajax加载功能将特定内容加载到div＃content中。这很容易。是否可以制作一个隐藏当前可见内容并显示相应内容的点击功能？

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

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

THX

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.
    });
});

Answer 2

我会给标签添加.active类并指定名称（比如2010？）属性。

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

然后有.active的CSS映射表示可见，否则.tab是display: none;。

帮助jQuery .load

2 个答案: