无法使用 jquery 显示选项卡内容

我对jquery仍然相当陌生，所以我正在做一些练习，在这里我试图创建一个导航，当你点击每个选项卡时显示内容，但我的问题是内容不会显示，我不确定是因为我没有使用正确的标识符还是我的代码是错误的。 请帮忙。

这是我的 html 代码：

<div id="tabs-1">
    <ul class="links">
        <li><a href="#tab1">tab1</a></li>
        <li><a href="#tab2">tab2</a></li>
        <li><a href="#tab3">tab3</a></li>
        <li><a href="#tab4">tab4</a></li>
        <li><a href="#tab5">tab5</a></li>
    </ul>

    <div class="tab-content">
        <div id="tab1" class="tab active" class="tab">
            <p>tab1</p>
        </div>
        <div id="tab2" class="tab">
            <p>tab2</p>
        </div>
        <div id="tab3" class="tab">
            <ptab3</p>
        </div>
        <div id="tab4" class= "tab">
            <p>tab4</p>
            <p>tab4</p>
            <p>tab4</p>
            <UL>
                <LI>tab4</LI>
                <LI>tab4</LI>
                <LI>tab4</LI>
                <LI>tab4</LI>
                <LI>tab4</LI>
            </UL>
        </div>
    </div>
</div>

这是风格.css：

body {
    background-color: #3399FF;
}
#tabs {
    width: 100%;
    display: inline-block;
}
.links: after {
    display: block;
    clear: both;
    content: '';
}
.links li {
    margin: 0px 5px;
    float: left;
    list-style: none;
}
.links a {
    padding:9px 15px;
    display:inline-block;
    border-radius:3px 3px 0px 0px;
    background:#7FB5DA;
    font-size:16px;
    font-weight:600;
    color:#4c4c4c;
    transition: all linear 0.15s;
}
.links a:hover {
    background: #a7cce5;
    text-decoration: none;
}
li.active  a, li.active a:hover{
    background: #fff;
    color: #4c4c4c;
}
.tab-content {
    padding: 100px;
    border-radius: 10px;
    box-shadow: -1px 1px 1px rgba(0,0,0,0.15);
    background: #fff;
}
.tab {
    display: none;
}
.tab .active {
    display: block;
}

这是我的jquery.js：

$(document).ready(function(){ 
     $('.links a').click(function(e){
        var attrValue= $(this).attr('href');
        $('#tabs' + attrValue).show().siblings().hide();
        $(this).parent('li').addClass('active').siblings().removeClass('active');
        e.preventDefault();
     }); 
});

内容不会显示