通过调用独特的函数加载/切换 DIV（在 WordPress 页面上）答案

【问题标题】：Loading/switching DIVs by calling unique functions (on WordPress page)通过调用独特的函数加载/切换 DIV（在 WordPress 页面上）
【发布时间】：2011-08-26 20:39:05
【问题描述】：

我更喜欢 HTML/CSS，虽然我知道一些基本的 Javascript，但我不知道如何编写我想看到的代码。我正在尝试在 WordPress 页面上执行此操作。

这是一个显示加拿大某个省/地区即将举行的活动的页面，顶部有一个交互式地图。

当用户点击地图上的某个省份时，它会调用一个函数，该函数将一个唯一的 DIV 及其内容加载到另一个“容器”DIV 中（以保持所有内容加载在同一个位置）。每个省/地区的所有 DIV 都在同一页面上，因为 WordPress 安装在根目录中，并且不允许链接到它创建的页面以外的页面（在同一域内）。

    <div id="map">
    </div>


 <div id="scheduleBox">
// content will be loaded here 
    </div>

<!-- ==== DIV FOR BC EVENTS ===== -->
    <div id="bc">
    <div class="schedule_header">
    <h2>Upcoming Events for British Columbia</h2>
    </div>
    <table>
    <tbody>
    <tr><!-- TABLE HEADERS -->
    <td class="tableheader">Date</td>
    <td class="tableheader">Time</td>
    <td class="tableheader">City</td>
    <td class="tableheader">Venue</td>
    </tr>
    <tr><!-- EVENT #1 -->
    <td class="date">August 01, 2011</td>
    <td class="time">12:00 AM</td>
    <td class="city">Kelowna, BC</td>
    <td class="venue">Venue Name Here</td>
    </tr>
    <tr><!-- EVENT #2 -->
    <td class="date">August 01, 2011</td>
    <td class="time">12:00 AM</td>
    <td class="city">Kelowna, BC</td>
    <td class="venue">Venue Name Here</td>
    </tr>
    <tr>
    <td class="date">August 01, 2011</td>
    <td class="time">12:00 AM</td>
    <td class="city">Kelowna, BC</td>
    <td class="venue">Venue Name Here</td>
    </tr>
    </tbody>
    </table>
    </div>

 // Event listings for Alberta //

    <div id="ab">
    <div class="schedule_header">
    <h2>Upcoming Events for Alberta</h2>
    ....
    ...
    </div>
    </div>

由于 WordPress 的限制，当用户点击另一个省份时，之前显示的内容会被替换为新的内容，而无需引用 URL 或 HTML 页面。它只是通过引用一个 DIV id 来抓取内容，然后加载其中的所有内容。

我曾尝试使用 jQuery 的 append 和 AJAX 函数来切换 DIV，但似乎没有任何效果。我还查看了切换 DIV 的教程，但这些教程依赖于外部页面。

所以，我很茫然。我在下面提供了一些伪代码，显示了我想要发生的事情：

function loadbc() {    // function that loads events for British Columbia
#scheduleBox.hide;      // clear content from the container div if there is any.
#scheduleBox.show;
findDiv("#bc");
#scheduleBox.AddContent("#bc");  // inject the DIV for BC events, and its contents.
fadeIn("fast");
}

也许我把事情复杂化了，或者遗漏了一些事情。无论如何，我非常感谢一些启发。

【问题讨论】：

标签： jquery ajax wordpress html

【解决方案1】：

首先.hide() 不会清除它只是隐藏的内容。如果你想清除你的内容，那么只需使用下一个方法

$('#scheduleBox').html('');

这将清除 scheduleBox 中的所有内容。

【讨论】：

【解决方案2】：

Demo

我会这样说：

$("#scheduleBox").children().remove();
$("#scheduleBox").hide();
$("#scheduleBox").append($("#bc"));
$("#scheduleBox").fadeIn("slow");

【讨论】：