Javascript JQuery简单选项卡导航

我想要一个简单的导航，不使用任何插件，只使用简单的JQuery

链接1第1部分、第2部分、第3部分、第4部分
链接2
链接3
链接4

---

当用户单击链接1时，显示div1并隐藏所有其他Div。链接2然后显示Div2并隐藏所有其他内容。我想用更少的行数来实现这一点。

你为什么不想使用插件？这里有一个很好的插件，可以满足您的所有要求：

这里有一个我一直在使用的代码片段（）： JS:

css（这里有很多改进的地方，呵呵）：

标记：

    <ul class="tabs">
    <li><a href="#tab1">Gallery</a></li>
    <li><a href="#tab2">Submit</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        asdfasdfasdfasdf
    </div>
    <div id="tab2" class="tab_content">
        asdfasdf
    </div>
</div>

asdfasdfasdfasdfasdf
asdfasdf

---

希望对您有所帮助

我在为您制作了一个，希望对您有所帮助。cheers

这是一个简单的脚本，只需添加到文件中，它就可以工作，而且与其他现有脚本没有冲突

请参见演示：

您可以检查此项

如果要动态填充，也可以使用它

$(document).ready(function() {
$.each($('.tabwrapper .tabmenu ul.nav li'), function(i) {
    $(this).attr('data-tab', i);
});
$.each($('.tabwrapper .tabcontent .tabs'), function(i) {
    $(this).attr('data-tab', i);
});
$('.tabwrapper .tabmenu ul.nav li a').click(function() {
    var parent = $(this).parent(),
        dataId = parent.data('tab');
    if (!parent.hasClass('active')) {
        $('.tabwrapper .tabmenu ul.nav li').removeClass('active');
        parent.addClass('active');
        $('.tabwrapper .tabcontent .tabs').hide();
        $('.tabwrapper .tabcontent .tabs[data-tab="' + dataId + '"]').fadeIn();
    }
});

---

}))

是一个插件，但也算作简单jQuery。您考虑过这个选项吗？

jquery ui如何？ui可以使用$（“.tabs”）.tabs（）实现这一点；了解了关于JSFIDLE的一些新知识。您可以如此轻松地对代码进行采样，这真是太棒了。

    <ul class="tabs">
    <li><a href="#tab1">Gallery</a></li>
    <li><a href="#tab2">Submit</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        asdfasdfasdfasdf
    </div>
    <div id="tab2" class="tab_content">
        asdfasdf
    </div>
</div>

$(document).ready(function() {
$.each($('.tabwrapper .tabmenu ul.nav li'), function(i) {
    $(this).attr('data-tab', i);
});
$.each($('.tabwrapper .tabcontent .tabs'), function(i) {
    $(this).attr('data-tab', i);
});
$('.tabwrapper .tabmenu ul.nav li a').click(function() {
    var parent = $(this).parent(),
        dataId = parent.data('tab');
    if (!parent.hasClass('active')) {
        $('.tabwrapper .tabmenu ul.nav li').removeClass('active');
        parent.addClass('active');
        $('.tabwrapper .tabcontent .tabs').hide();
        $('.tabwrapper .tabcontent .tabs[data-tab="' + dataId + '"]').fadeIn();
    }
});