jquery - Change tab on div click and not in <a> -

im have tabs script , works when click on link , not when click on main div, if click outside area tab changes dont show proper content, im new on jquery please dont hard me, think noob problem :(

this jquery:

$(document).ready(function () {      /* ____tabs menu (en gradient)____ */     function changetabs(elemtab){         /* default estate */         elemtab.first().addclass('on_tab');         elemtab.first().next().find('a').css('border-left-color','transparent');         /*add class on active */         elemtab.click(function(){             elemtab.removeclass('on_tab');             $(this).addclass('on_tab');             /*change border*/             elemtab.find('a').css('border-left-color','#0086c3');             $(this).next().find('a').css('border-left-color','transparent');             $(this).find('a').css('border-color','transparent');         });     }       var my_elem = $('.list_tabs .prod_tab');     changetabs(my_elem);       /* call */     var my_elem1 = $('.container_menu .list_tabs .tab');     var my_elem2 = $('container_menu2 .list_tabs .tab');     changetabs(my_elem1);     changetabs(my_elem2);       // change tabs' content     $(function() {         $('a').click(function(){             $(this).parents().siblings(".content_menu").children().hide();             $(this).parents().siblings(".content_menu").children($(this).attr('href')).show();          });     }); 

this html

<div class="list_tabs">                     <div class="tab"><div><a href="#tabs-1">xxxxxxx</a></div></div>                     <div class="tab"><div><a href="#tabs-2">xxxxxxxx</a></div></div>                     <div class="tab"><div><a href="#tabs-3">xxx</a></div></div>                 </div>                 <!-- aqui va todo tu contenido -->                 <div class="content_menu">                      <div id="tabs-1" style="display:block">                         <p>tab1 proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus nec arcu. </p>                     </div>                     <div id="tabs-2" style="display:none">                         <p>tab2 aaaaaaaaaaa</p>                     </div>                     <div id="tabs-3" style="display:none">                         <p> tab3 eleifend est et turpis. duis id erat. suspendisse potenti. aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. vestibulum non ante. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. fusce sodales. quisque eu urna vel enim commodo pellentesque. praesent eu risus hendrerit ligula tempus pretium. curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>                     </div>                 </div> 

i have tried change ('a') ('.tab') didnt worked out.

here fiddle: jsfiddle.net/s6jtb

it should be:

$(function() {     $('.tab').click(function(){         $(this).siblings(".content_menu").children().hide();         $(this).siblings(".content_menu").children($(this).attr('href')).show();      }); }); 

you not need .parent()