Bootstrap, how to update a Div when using <a> and data-toggle and data-target -

i new bootstrap , struggling understanding flow. looking update section when clicked.

here code

<li class="list-group-item">   <a data-toggle="tab" href="#tab-1">     <small class="pull-right text-muted"> 16.02.2015</small>     <strong>ann smith</strong>     <div class="small m-t-xs">      <p>survived not 5 centuries, leap scrambled make.</p>      </div>   </a> </li> 

i want update div tab1 content through url call. when put href="my.html", target div not update. think missing simple in bootstrap... tried data-target, did not work.

any / direction / tutorial appreciated.

i don't think possible out-of-the-box bootstrap. think need this:

$('#tab-1').on('show.bs.modal', function (event) {     var _this = this;     var button = $(event.relatedtarget); // button triggered modal     var href = button.attr('href'); // extract href opener.     if(typeof href !== 'undefined' ) {         $.ajax( href ).done(function(html) {             _this.html(html);         }).fail(function() {             alert('something went wrong!');         });     } }); 

this bind show event target modal. there can load page href. add logic/checks make sure href isn't starting #. handle fail properly, when goes wrong, should point right direction. hopes helped.