title: How to highlight the respective tab on clicking an image in it
body: <p>I have few tabs each with an image in it. I can switch the tabs by clicking on the respective dots above it, or the image below.</p>
  
  <p>The issue here is, when i switch the tabs by clicking the dots, the respective dot will be highlighted, but i'm unable to highlight the corresponding dot while switching tabs by clicking images.</p>
  
  <p>Following the the HTML</p>
  
  <pre><code>&lt;section class="main"&gt;
  &lt;section class="tabsblock"&gt;
      &lt;div class="wrap"&gt;
          &lt;div class="tab"&gt;
              &lt;ul class="tabs clearfix"&gt;
                  &lt;li class="active"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;!-- tabs --&gt;
              &lt;div class="box visible"&gt;
                  &lt;div class="box-text"&gt;
                       &lt;h3&gt;TAB ====== 1&lt;/h3&gt;
  
                      &lt;p&gt;Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit aliquet felis, quis ultrices orci condiment.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;img id="tab_1" src="http://s13.postimg.org/ywlkh7hon/tabs.png" width="437" height="459" alt="" /&gt;
              &lt;/div&gt;
              &lt;!-- box --&gt;
              &lt;div class="box"&gt;
                  &lt;div class="box-text"&gt;
                       &lt;h3&gt;TAB ====== 2&lt;/h3&gt;
  
                      &lt;p&gt;Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit aliquet felis, quis ultrices orci condiment.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;img id="tab_2" src="http://s13.postimg.org/ywlkh7hon/tabs.png" width="437" height="459" alt="" /&gt;
              &lt;/div&gt;
              &lt;!-- box --&gt;
              &lt;div class="box"&gt;
                  &lt;div class="box-text"&gt;
                       &lt;h3&gt;TAB ====== 3&lt;/h3&gt;
  
                      &lt;p&gt;Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit aliquet felis, quis ultrices orci condiment.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;img id="tab_3" src="http://s13.postimg.org/ywlkh7hon/tabs.png" width="437" height="459" alt="" /&gt;
              &lt;/div&gt;
              &lt;!-- box --&gt;
          &lt;/div&gt;
          &lt;!-- tab --&gt;
      &lt;/div&gt;
      &lt;!-- wrap --&gt;
  &lt;/section&gt;
  &lt;!-- --&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>And JS</p>
  
  <pre><code>$('.tabs').delegate('li:not(.active)', 'click', function () {
      $('.tabs').delegate('li:not(.active)','click',function(){$(this).addClass('active').siblings().removeClass('active').parents('.tab').find('.box').hide().eq($(this).index()).fadeIn(250);
  });
  document.getElementById('tab_1').addEventListener('click', function () {  
     $(this).addClass('active').siblings().removeClass('active').parents('.tab').find('.box').hide().eq(1).fadeIn(250);  
  });
  document.getElementById('tab_2').addEventListener('click', function () {  
     $(this).addClass('active').siblings().removeClass('active').parents('.tab').find('.box').hide().eq(2).fadeIn(250);  
  });
  document.getElementById('tab_3').addEventListener('click', function () {  
     $(this).addClass('active').siblings().removeClass('active').parents('.tab').find('.box').hide().eq(0).fadeIn(250);  
  }); 
  </code></pre>
  
  <p>Here is the <a href="http://jsfiddle.net/jrico/nqB25/" rel="nofollow">fiddle</a> demonstrating the issue.</p>