javascript - 如何在没有 jQuery UI 的情况下创建简单的 jQuery 选项卡？

Question

当我单击选项卡时，它会显示关联的内容。我正在使用 # 来做到这一点。这是我尝试过的方法，但我不知道如何进行切换部分，有人可以帮忙吗？

所以当点击tab1显示tab1内容​​，点击tab2显示tab2内容等。

$(document).ready(function () {
    $('.tab-content:not(:first)').hide();
    $('.tab-menu li a').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
    });
});

.tab-menu {
    padding: 0;
}
.tab-menu li {
    display: inline-block;
}
.tab-menu .active {
    background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tab-menu">
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
</ul>
<p id="tab-1" class="tab-content">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>

编辑，我不喜欢使用 jQuery UI 或任何插件。

Answer 1

你离这里很近，只有几件事:

1) 我建议将“事件”类应用到父类 <li>这样您的突出显示将更容易获得

2) 使用 href单击链接的内容来切换内容，我会使用一个类来隐藏/显示内容，但是我将按照您使用 show() 的示例提供 jQuery和 hide()方法。两种方法都行得通。

最终的 jQuery 应该是这样的:

$(document).ready(function() {
    $('.tab-content').slice(1).hide();
    $('.tab-menu li').eq(0).addClass('active');
    $('.tab-menu li a').click(function(e) {
        e.preventDefault();
        var content = $(this).attr('href');
        $(this).parent().addClass('active');
        $(this).parent().siblings().removeClass('active');
        $(content).show();
        $(content).siblings('.tab-content').hide();
    });
});

它在 fiddle 中工作以供引用:http://jsfiddle.net/yscbeaxh/