Question

我不知道这种“效果”被称为什么，我试着谷歌我的想法，它可能被称为什么，但没有结果。

当有人点击图片中示例中显示的“Grocery / Drinks”时，蓝色内容会发生变化，而不会转到其他页面。

我想知道是否有人知道在哪里可以找到关于此的某些类型的信息/指南。

Answer 1

您可以使用hide（）和show（）来选择要显示的div：

<强> HTML：

<a class="foo">Show FOO</a>
<a class="bar">Show BAR</a>
<div class="foo">FOO</div>
<div class="bar">BAR</div>

<强> CSS：

div.foo{display:block}
div.bar{display:none}

<强> JS：

$("a.foo").click(function() {
   $("div.bar").hide();
   $("div.foo").show();
});
$("a.bar").click(function() {
   $("div.foo").hide();
   $("div.bar").show();
});

或者您可以像这样更改div的内容：

<强> HTML：

<a class="foo">Show FOO</a>
<a class="bar">Show BAR</a>
<div>FOO</div>

<强> JS：

$("a.foo").click(function() {
   $("div").html("FOO");
});
$("a.bar").click(function() {
   $("div").html("BAR");
});

Answer 2

他们可能正在使用jQuery load()。

描述：从服务器加载数据并将返回的HTML放入匹配的元素中。

Answer 3

这可以通过多种方式实现！

1）Ajax善良

请求服务器中的数据（$ .load，$ .ajax，good ole xmlhttprequest），然后将其弹出到您的DOM中。

这是一个JS小提琴示例： http://jsfiddle.net/y8ghj/

2）display:none善良

抓取所有数据并将其投放到页面中。将显示默认内容，但其余内容将隐藏。使用JavaScript（甚至CSS！），您可以触发为每个部分显示的事件。

这是一个JS小提琴示例（使用jQuery show / hide）：http://jsfiddle.net/VKkR9/

1页上的2页内容？

3 个答案: