javascript - 无法使用 jquery 显示标签内容

Question

我对 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>

这是 style.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();
     }); 
});

内容不会显示

Answer 1

改变:

$('#tabs ' + attrValue).show().siblings().hide();

到

$(attrValue).show().siblings().hide();

您已经在 attrValue 中捕获了 ID，因此无需将任何内容附加到 #tabs。

jsFiddle