1
4

3 回答 3

1

你想要的是简单的词叫做Ajax.

您可以使用 Ajax 首先向服务器发送请求以加载页面内容，如下所示：

$.ajax({
 url: "page_url"
});

然后在成功将数据写入 div 为：

$.ajax({
 url: "page_url",
 success: function (data) {
  $('#content').html(data);
});

这样，内容将保留在那里，但其内容将得到更新！

如果您也想更改网址，请使用window.locationor window.href。

其他想法是首先加载所有内容。然后使用 jQuery 将 div 显示/隐藏为：

$('#nav li').click(function () {
  $('#content').hide();
  $('#newcontent').show(); // this is a new div 
                           // that you will show once click is done.
}

单击后，div 将隐藏，其他具有新内容的 div 将显示。这样，您无需向服务器创建新请求，只需隐藏/显示内容。您也可以为页面添加更多样式。

这样，当事件发生时，您将能够更改网页上显示的内容，例如：click，在任何元素上进行。您将需要使用jQueryAPI 来处理这些。

注意：这只是一种简单的方法，您也有很多其他机会做同样的事情。

祝兄弟好运！干杯。

参考这些技术：

对于阿贾克斯：

来自 Mozilla 开发者网络：https ://developer.mozilla.org/en/docs/AJAX

来自 jQuery API：http ://api.jquery.com/jQuery.ajax/ （必读）

对于 jQuery：

来自 jQuery：http ://www.jquery.com/

来自 jQuery API：http ://api.jquery.com/

于 2013-10-06T17:46:55.460 回答
1

根据@afzaal 的建议，您应该使用ajax 调用从服务器获取数据。但是您可以使用该.load()方法自动切换#content标签内的内容：

$('#content').load('http://url.com #content');

除此之外，您希望使用淡入/淡出动画来转换内容，您可以使用带有类更改的 css 转换来触发它：

$('#nav li').on('click', function(){ //on a menu item click
    $('#content').one('transitionend, function(){ //called .one() because we only want it to fire once
        $('#content').load('http://url.com #content', function(){ //load content form server via ajax. The #content form the requested page will be appended to the #content of the current DOM
            $('#content').removeClass('animating'); //remove class; will trigger exit transition
        });
    });
    $('#content').addClass('animating'); //add class; will kick off transition
});

您只想绑定容器淡出时的 transitionend 事件，这就是我使用.one()函数的原因。这样我们就可以在内容隐藏后立即启动 .load() 调用。我们不需要知道 css fadeIn 何时完成，因为一旦新内容可见就无事可做。

这是快速（未经测试或验证）的 css 转换：

#content{opacity:1; transition: opacity 2s;}
#content.animating{opacity:0;}

注意：transitionend将在该元素上结束 css 转换时被抛出并捕获。为了完全兼容，您需要添加所有主流浏览器（Chrome、Opera、Firefox、IE）的所有差异。

注意 2：css 过渡也是如此，一定要添加所有的过渡变体，以便与所有浏览器完全兼容。

于 2013-10-06T18:09:24.203 回答
0

遗憾的是，CSS 中没有 onClick 事件，也不能针对触发事件的元素之外的任何元素。

你可以用javascript来做到这一点。

于 2013-10-06T17:45:28.473 回答