且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在不重新加载页面的情况下更改内容?

更新时间:2021-09-19 01:25:44

您可以使用Ajax.

但是,如果您是初学者,请没有Ajax的另一种解决方案:

But if you're total beginner, another solution without Ajax :

•将所有内容放在一个文件中

• put all your content in a single file

•在您的div上添加与内容相关的ID(包含"about"的内容的div = div#about)

• put IDs on your div, related to the content (div containing "about" content = div#about)

•只需点击与内容相关的div即可

• just toggle the div on click, related to the content

喜欢这个(带有jQuery的JS):

Like this (JS with jQuery) :

$(document).ready(function(){
  $('nav a').click(function(){
    var dest = $(this).attr('href');
    $('div.content').fadeOut(); // Hide all content divs
    $(dest).fadeIn(); // Show the requested part
    // You can do all of this using addClass / removeClass and use CSS transition (smoother, cleaner);
  return false;  
});
});

HTML已更新:

<ul> <li class="selected"><a href="#home">home</a></li> <li><a href="#about">about me</a></li> <li><a href="#contact">contact</a></li> <ul>

如果您不知道什么是Ajax,我想此解决方案对您来说更好.