ändern Inhalt div, wenn Sie auf Link/Button

Question

Grundsätzlich ich eine Web-Seite, die ein div id = „content“ und eine div id = „sidebar“,

Was ich möchte, ist zu tun, um die Änderung Inhalt im Inhaltsbereich, wenn auf einen Link/eine Schaltfläche in der Seitenleiste geklickt wird, ohne dass für jeden Artikel eine entsprechende Seite angezeigt wird.

Der Grund dafür ist;

Ich mache eine BIO-Seite für mehrere Bänder und es würde mehrere Schaltflächen für jedes Band geben, wenn ein Benutzer auf den Button/Link klickt, würde sich der Inhalt ändern.

Irgendwelche Ideen, ich habe in .click mit jQuery oder vielleicht PHP untersucht, aber nicht genau sicher, wie man es implementiert.

Answer 1

Sie jeden Artikel in einer HTML-Datei auf dem Server setzen könnte, die jeweils mit einem div um ihn herum gewickelt, wie folgt aus (lassen Sie uns das sagen Datei wird myArticles.html genannt und ist im selben Ordner wie die Haupt-Seite):

<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> 

verwenden Dann .load Funktion jQuery diese Daten zu laden AJAX in Ihre Seite verwenden.

Sagen Sie Ihre Taste für Artikel 1 die id = 'articleButton1' und 2 hat id = 'articleButton2' (und beide mit href = '#', so dass die Seite ändert sich nicht) dann diese jQuery funktionieren würde:

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

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

Dies nimmt die richtige div aus dieser Seite auf Ihrem Server und legt sie in den #content div

Answer 2

Sie müssen in diesem Tutorial sehen,

Tabify

Answer 3

was jQuery UI vertikal Tabs? http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html

mehr auf jQuery UI Tabs und Laden von Inhalten über Ajax: http://jqueryui.com/demos/tabs/#ajax