не работают табы

[Olesiya]

 

Здравствуйте уважаемые форумчане! Не работает самописный tab, проверяла код js ошибок нет, в html и css тоже вроде нету, в чем дело не пойму.Помогите пожалуйста.

<div class="tabs-pannel">
    <div class="tabs">
        <div data-target="tab-content-1" class="tab tab-1"><span>вклядка1</span></div>
        <div data-target="tab-content-2" class="tab tab-2"><span>вклядка2</span></div>
        <div data-target="tab-content-3" class="tab tab-3"><span>вклядка3</span></div>
    </div>
    <div class="tab-contents">
        <div class="tab-content tab-content-1">
            <p>содержимое;*1</p>
        </div>
        <div class="tab-content tab-content-2">
            <p>содержимое;*2</p>
        </div>
        <div class="tab-content tab-content-3">
            <p>содержимое;*3</p>
        </div>
    </div>
</div>

.tab {
    display: inline-block;
    width: 200px;
    text-align: center;
    background-color: #aaa;
    height: 40px;
    line-height:: 40px;
    border-radius: 10px;
    cursor: pointer;
}

.tab-content {
    width: 610px;
    background-color: rgba(130, 0, 0, .2);
    margin: 5px;
    display: none;
}

.hidden {
    display: none;
}

.visible {
    display: block;
}

 

<script>
    var tab= $('.tab');
    tab.click(function(){
        consol.log('лик по табу');
        var target= $(this).attr('data-target');
        console.log('эта вкладка'+target);
        $('.tab-content').hide();
        $('.'+target).show();
    });
</script>

 

Edited February 4, 2019 by klierik

[AlexZaw]

        console.log('лик по табу');