title: Load dropdown menu content in div using AJAX
body: <p>My goal is to click in dropdown menu (div id=cssmenu) elements and display data in the  using AJAX , so i made a small js code but i don't know how can i make it to load in the div i mentioned and erase the content that div displayed before.</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="row"&gt; 
    &lt;div class="col-md-3" &gt;
  
       &lt;div id='cssmenu'&gt;
  &lt;ul&gt;
     &lt;li class='active'&gt;&lt;a href='#' data-url="http://localhost/bioinformatica/Main_page/Quick_search.html#qhelp"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li class='has-sub'&gt;&lt;a href='#'&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;
        &lt;ul&gt;
           &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Project&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
           &lt;li class='last'&gt;&lt;a href='#'&gt;&lt;span&gt;Team&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/li&gt;
     &lt;li class='last'&gt;&lt;a href='#'&gt;&lt;span&gt;News&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt; 
      &lt;/div&gt;
  
      &lt;div class="col-md-9"&gt;
      &lt;div id="tabs"&gt;
      &lt;ul class="nav nav-tabs" id="prodTabs"&gt;
          &lt;li class="active"&gt;&lt;a class="clickableLink" href="#tab_quick" data-url="http://localhost/bioinformatica/Main_page/Quick_search.html#qhelp"&gt;Quick Search&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="clickableLink" href="#tab_advanc" data-url="#"&gt;Advanced Search&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="clickableLink" href="#tab_struct" data-url="something3.txt"&gt;Structure Search&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="tab-content"&gt;
          &lt;div id="tab_quick" class="tab-pane active"&gt;&lt;/div&gt;
          &lt;div id="tab_advanc" class="tab-pane active"&gt;&lt;/div&gt;
          &lt;div id="tab_struct" class="tab-pane active"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
    &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div class="clearfix visible-lg"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$( document ).ready(function() {
  
  $('#cssmenu a').click(function (e) {
      e.preventDefault();
  
      var url = $(this).attr("data-url");
      var href = this.hash; 
      var pane = $(this);
  
      // ajax load from data-url
      $(href).load(url,function(result){      
          pane.tab('show');
      });
  
  });
  });
  </code></pre>
  
  <p>For example in the Menu, when i click Home i would like it to load it's data-url attr in the div id=tabs , i.e, replacing all the contents by Home data-url. Thanks  ! </p>