如何在不重新加载页面的情况下更改内容? [英] how to change content without reloading the page?
问题描述
好的,所以可以说我有导航栏.
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包括在<代码>< DIV类= '内容' > 代码> +变化类的<代码><李>主页</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,我想此解决方案对您来说更好.
这篇关于如何在不重新加载页面的情况下更改内容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!