Question

在我的弹出页脚中，我有一些标签，页面加载显示每个标签/ div的所有内容。但是当单击选项卡时它会按预期执行，仅显示所选选项卡/ div中的内容如何隐藏所有其他div /选项卡以仅显示第一个视图中的第一个活动div内容？

到目前为止，这是我的代码：

HTML

<ul id='tab'>
    <li><a href='#' class="active" id="tab1">FOLLOW</a></li>
    <li><a href='#' id="tab2">NEWSLETTER</a></li>
    <li><a href='#' id="tab3">SITE INFORMATION</a></li>
</ul>
<div id="cnt-footer">
<div id='cnt-tab1'>
<div id='cnt-tab2'>

的Javascript

$(document).ready(function () {
  $('#tab a').click(function (ev) {
    ev.preventDefault();

    var el = $(this), target = el.attr('id');

    if(el.hasClass('active')) return;

    $('#tab a').removeClass('active');
    el.addClass('active');

    $('#cnt-footer>div').hide();
    $("#cnt-footer>div:not(:first)").hide();
    $('#cnt-footer #cnt-' + target).fadeIn('fast');
  });
});

任何帮助将不胜感激..

Answer 1

试试这个：Sample

$(document).ready(function () {
 $("#cnt-footer>div:not(:first)").hide();
 $('#tab a').click(function (ev) {
    ev.preventDefault();

    var el = $(this),
        target = this.id;

    if (el.hasClass('active')) return;

    $('#tab a').removeClass('active');
    el.addClass('active');

    $('#cnt-footer>div').hide();
    $('#cnt-footer #cnt-' + target).fadeIn('fast');
 });
});

Answer 2

您可以将非活动元素的显示设置为隐藏在HTML中。这样您就不必依赖用户的浏览器来隐藏document.ready

上的元素

<ul id='tab'>
    <li><a href='#' class="active" id="tab1">FOLLOW</a></li>
    <li><a href='#' id="tab2">NEWSLETTER</a></li>
    <li><a href='#' id="tab3">SITE INFORMATION</a></li>
</ul>
<div id="cnt-footer">
<div id='cnt-tab1' style='display: hidden'>
<div id='cnt-tab2' style='display: hidden'>

选项卡：显示所有选项卡内容的初始页面加载

2 个答案: