سؤال

I'm trying to build a web app (HTML/Bootstrap/jquery) which has header,footer,leftnav and right pane. The content of the right pane would be a separate html page which will be loaded based on what is clicked in the left nav.

I got individual pages with HTML for header/footer/leftnav replicated for each content page. But I only would like to have the right pane content to be loaded without reloading the other components.

Heres an example, upon click on left nav item.. only the content of the right pane changes: http://play.raaga.com/myraaga

Appreciate any help, thanks!

هل كانت مفيدة؟

المحلول

You could use the ".load()" function of jquery.

$('selector-of-the-panel').load('url');

jQuery .load() docs

نصائح أخرى

The example you included looks pretty close to jQuery UI's .tabs() widget, which you can use with ajax to load your different html pages: http://jqueryui.com/tabs/#ajax For a vertical nav-like look, see: http://jqueryui.com/tabs/#vertical

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top