javascript - 无法使用jQuery显示选项卡内容

标签 javascript jquery html css css3

我对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();
     }); 
});


内容不会显示

最佳答案

更改:

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




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


您已经在attrValue中捕获了ID,因此无需在#tabs后面添加任何内容。

jsFiddle

关于javascript - 无法使用jQuery显示选项卡内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28014230/

相关文章:

javascript - 是否可以防止隐藏元素在焦点上跳入视野

javascript - 更改悬停时的背景图片并保持事件状态

javascript - 如何使用phonegap同步设备日历以添加事件

javascript - html间距问题-保留左边距为可变右边距0

javascript - 动画后重置 div

javascript - 同时进行缩小和丑化是否有意义?

javascript - "Unlink"从数据库回显结果

javascript - 单击某些输入类型时,可以使用slideup()函数向上滑动页面

jquery - 更改链接的父li ID onclick

javascript - 复选框(javascript)选择,第一项显示未定义?