title: change url with tab on click with materialize css and jquery
body: <p>2nd question here and new to coding. 
  I'm trying to change the url when I change the materialize css tabs, using jquery but it isnt working.
  The html is:</p>
  
  <pre><code>    &lt;div class="row"&gt;
                  &lt;div class="col s12"&gt;
                      &lt;ul class="tabs tabs-transparent"&gt;
                          &lt;li class="tab col s6 m6 l6 blue z-depth-0"&gt;&lt;a class="waves-effect waves-blue-darken-2" href="#favorites"&gt;FAVORITES&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="tab col s6 m6 l6 card-panel blue z-depth-0"&gt;&lt;a class="active  waves-effect waves-blue-darken-3" href="#recommended"&gt;RECOMMENDED&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;   
      &lt;div class="containter"&gt;
          &lt;section class="col s12 card-panel white content z-depth-0" id= "favorites"&gt;
                  &lt;ul class="collection fixed"&gt; (A LOT OF LI ELEMENTS)
      &lt;section class="col s12 card-panel white content z-depth-0" id="recommended"&gt;
      &lt;!--STARTS LIST--&gt;
              &lt;ul class="collection"&gt;(AGAIN A LOT OF LI ELEMENTS)
  </code></pre>
  
  <p>And the Jquery:</p>
  
  <pre><code> $(function() {
     var $content = $('.content');
     $(document).on('click', '.tabs', function() {
       var href = $(this).attr('href')
       window.history.pushState({$content}, '', href)
       $content.load(href)
       return false;
     });
  });
  </code></pre>
  
  <p>On console it says: </p>
  
  <pre><code>Uncaught DOMException: Failed to execute 'pushState' on 'History': HTMLElement object could not be cloned.
  at HTMLUListElement.&lt;anonymous&gt; (file:///C:/Users/Carla/Desktop/streema-estatica/js/functions.js:13:22)
  at HTMLDocument.dispatch (file:///C:/Users/Carla/Desktop/streema-estatica/js/jquery-3.2.1.min.js:3:10316)
  at HTMLDocument.q.handle (file:///C:/Users/Carla/Desktop/streema-estatica/js/jquery-3.2.1.min.js:3:8343)
  </code></pre>
  
  <p>If I take out the $content var in the pushState, the console says:</p>
  
  <pre><code>jquery-3.2.1.min.js:4 Uncaught TypeError: Cannot read property 'indexOf' of undefined
  at r.fn.init.r.fn.load (jquery-3.2.1.min.js:4)
  at HTMLUListElement.&lt;anonymous&gt; (functions.js:14)
  at HTMLDocument.dispatch (jquery-3.2.1.min.js:3)
  at HTMLDocument.q.handle (jquery-3.2.1.min.js:3)
  </code></pre>
  
  <p>Thank you!</p>