Question

I have a bootstrap Navigation list which points to different urls

   <div class="span2">
                <div class="sidebar-nav">
                    <ul class="nav nav-list">                       
                        <li class="active">
                            <a class="pass" href="#">Password</a>
                        </li>
                        <li>
                            <a class="favor" href="#">My Favorites</a>
                        </li>
                        <li>
                            <a class="open" href="#">Open</a>
                        </li>
                    </ul>
                </div>
        </div>

when i click any of the url’s i want to to load the page in the div’s given below not open a new page how can i do it?

 <div class="span10">
            <div class="page-content">
                  <div class="pass">
                  </div>
                  <div class="favor">
                  </div>
                  <div class="open">
                  </div>
            </div>
        </div>

Answer 1

You need to use JQuery .load()

http://api.jquery.com/load/

So, first you need to give your target div an id, like this:

<div class="span10" id="target">

Then you need to bind an onClick event to each link that runs the following load

$('#target').load('/url/for/passwordadmin');

A suggested way to bind the onClick event would be to run this on document.ready:

$(".passwordAdmin").click(function() {
  $('#target').load('/url/for/passwordadmin');
});

You should do that for each link that should have this capability.