5

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

我想做的是在侧边栏中单击链接/按钮时更改内容 div 中的内容，而每篇文章都没有单独的页面。

原因是；

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

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

4

3 回答 3

7

您可以将每篇文章放在服务器上的一个 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

于 2012-06-06T14:43:59.743 回答
1

您需要查看本教程，

制表

于 2012-06-06T14:38:56.037 回答
1

jQuery UI 垂直标签呢？ http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html

更多关于 jQuery UI 选项卡和通过 ajax 加载内容：http: //jqueryui.com/demos/tabs/#ajax

于 2012-06-06T14:48:53.033 回答