title: if jQuery element hasClass() change different element link text
body: <p>I am using a jQuery function to add/remove a class to the clicked element, which works just fine. However when that element is clicked, I am trying to change the text of an HTML link and I cannot seem to get it working. The HTML link is located within the <code>&lt;span&gt;</code> element further down the page.</p>
  
  <p>When <code>&lt;button id="people"&gt;</code> hasClass('user_view_active') the HTML link should display "People" when <code>&lt;button id="jobs"&gt;</code> hasClass('user_view_active') the HTML link should display "Jobs".</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
                  $(document).ready(function() {
          $('button').click(function(){
              $('button').each(function(){
                  $(this).removeClass('user_view_active'); 
              });
          $(this).addClass('user_view_active');
          });
  
          if ($('#people').hasClass('user_view_active')){
              $('.title').find("a").attr("href").text(text.replace('People'));
          }else{
              $('.title').find("a").attr("href").text(text.replace('Jobs'));
          }
      });
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container"&gt;
  
      &lt;header&gt;
              &lt;img src="images/header-name.png" width="200px" style="display: inline; margin-bottom: -10px;"/&gt;
              &lt;button id="jobs" class="user_view"&gt;&lt;a href="#"&gt;Jobs&lt;/a&gt;&lt;/button&gt; 
              &lt;button id="people" class="user_view_active user_view"&gt;&lt;a href="#"&gt;People&lt;/a&gt;&lt;/button&gt;
  
              &lt;div class="header_search_wrapper"&gt;
                  &lt;form action="" method="POST"&gt;
                      &lt;textarea class="header_search" name="app_search" placeholder="Search people, jobs, or companies" style="width: 430px;"&gt;&lt;/textarea&gt;
  
                      &lt;input type="submit" class="share_btn" value="Search"&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;div id="main" role="main"&gt;
          &lt;!--! begin app content --&gt;
  
          &lt;div class="right_sidebar"&gt;
          &lt;span class="right_title"&gt;Connection Suggestions&lt;/title&gt;
  
  
          &lt;/div&gt;
  
          &lt;span class="title"&gt;Recent Updates &gt;&gt; &lt;a href="#"&gt;People&lt;/a&gt;&lt;/span&gt;
  </code></pre>