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

Answer 2

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

您引用'#tabs'。没有id标签，它是一个类，所以选择器是$('.tabs')但你无论如何都不需要它。 id是独一无二的，所以作为选择者自己工作。

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

无法使用jquery显示标签内容

2 个答案: