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

问题描述：

好的，所以可以说我有导航栏.

Ok, so lets say that I have navbar eg.

< ul>< li class ="selected"> home</li>< li>关于我</li>< li" contact</li>< ul>

，而我要更改的页面上的内容取决于选择的< li> 而不重新加载整个页面.重新加载整个页面以更新2个divs似乎没有意义.

and I have a content on a page that I want to change depending on which <li> is selected without reloading the whole page. It seems a bit pointless to reload the whole page just to update 2 divs.

例如被选择的家庭时，我想要加载home.php包括在&LT; DIV类= '内容' &GT; 代码> +变化类的&LT;李&GT;主页</li> 到选定的等.

eg. when home is selected I want to load home.php included in <div class='content'> + change class of <li> home</li> to selected etc.

我应该为此使用AJAX吗?还是应该使用$ _GET->更改URL?

should I use AJAX for this? or should I use $_GET -> altering the URL?

我是初学者->对基本问题感到抱歉.

I am a beginner -> sorry for basic questions.

感谢您的任何帮助！

答

您可以使用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，我想此解决方案对您来说更好.

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

相关推荐