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

在我的弹出式页脚中，我有一些选项卡，它们在页面加载时显示每个选项卡/分区的所有内容。但是，当单击选项卡时，它会正常运行，仅显示所选选项卡/分区中的内容。我如何隐藏所有其他分区/选项卡，以便在第一个视图中仅显示第一个活动分区的内容

这是我目前的代码：

HTML

任何帮助都将不胜感激。

试试以下方法：

---

您可以将非活动元素的显示设置为隐藏在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'>






A.V.你真是个天才。非常感谢，它工作得非常好。非常感谢。
$(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');
  });
});

$(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');
 });
});

<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'>