单击链接/按钮时更改div的内容

Question

基本上我有一个div id ="content"和div id ="sidebar"的网页,

我想要做的是在侧边栏中单击链接/按钮时更改内容div中的内容,而不是每篇文章都有一个serperate页面.

原因是;

我正在为一些多个乐队做一个BIO页面,每个乐队会有多个按钮,然后当用户点击内容会改变的按钮/链接时.

任何想法,我一直在研究.click使用jQuery或PHP,但不完全确定如何实现它.

Answer 1

您可以将每个文章放在服务器上的一个HTML文件中,每个文件都包含一个div,就像这样(假设该文件名为myArticles.html,与主页位于同一个文件夹中):

<div id='article1'>
    <b>ARTICLE 1</b> This is my first article
</div>

<div id='article2'>
    <b>ARTICLE 2</b> This is my second article
</div>

然后使用jQuery的.load函数将AJAX加载到您的页面中.

假设你的第1条按钮有id ='articleButton1',2有id ='articleButton2'(并且都有href ='#',所以页面没有改变)那么这个jQuery会起作用:

$('#articleButton1').click(function(){
    $('#content').load('myArticles.html #article1');
}

$('#articleButton2').click(function(){
    $('#content').load('myArticles.html #article2');
}

这会从服务器上的该页面中选择正确的div并将其放入#contentdiv中