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

【问题标题】：Tabs: initial page load showing all tab contents选项卡：显示所有选项卡内容的初始页面加载
【发布时间】：2013-03-09 15:37:23
【问题描述】：

在我的弹出页脚中，我有选项卡，在页面加载时会显示每个选项卡/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');
  });
});

任何帮助将不胜感激..

【问题讨论】：

标签： jquery tabs

【解决方案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');
 });
});

【讨论】：

影音你绝对是个天才。非常感谢你，它工作得很好。非常感谢。

【解决方案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'>

【讨论】：