I'm have a tabs script and it works but only when I click on the link and not when I click on the main div, so if you click outside the a area the tab changes but don't show the proper content, I'm new on jQuery so please don't be so hard with me, I think this is a noob problem :(

This is the jQuery:

```
$(document).ready(function () {

    /* ____tabs menu (en gradient)____ */
    function changetabs(elemtab){
        /* by 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 is the 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 to change the ('a') to ('.tab') but it didnt worked out.

Here is the fiddle: [jsfiddle.net/s6JtB](http://jsfiddle.net/s6JtB)