1

私のポップアップフッターには、ページの読み込み時にすべてのタブ/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 に答える