1

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

任何帮助将不胜感激..

4

2 回答 2

1

试试这个：样本

$(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');
 });
});
于 2013-03-09T15:45:20.113 回答
-1

您可以将非活动元素的显示设置为隐藏在 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'>
于 2013-03-09T15:57:49.973 回答