0

DIVを表示するのに完全に機能する JavaScript コードを見つけました。ただし、このコードは各ページに1 つのdivを表示する場合にのみ機能します。同じページに非表示および表示するための多くの DIVS を含めたい。

インクルードごとにdiv idとshow/hide span idをランダムな php 番号に置き換えようとしましたが、まだ機能していません。

だから私はそれをしなければならないのですか？

JS コード:

var done = true,
    fading_div = document.getElementById('fading_div'),
    fade_in_button = document.getElementById('fade_in'),
    fade_out_button = document.getElementById('fade_out');

function function_opacity(opacity_value) {
    fading_div.style.opacity = opacity_value / 100;
    fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
}

function function_fade_out(opacity_value) {
    function_opacity(opacity_value);
    if (opacity_value == 1) {
        fading_div.style.display = 'none';
        done = true;
    }
}

function function_fade_in(opacity_value) {
    function_opacity(opacity_value);
    if (opacity_value == 1) {
        fading_div.style.display = 'block';
    }
    if (opacity_value == 100) {
        done = true;
    }
}
// fade in button
fade_in_button.onclick = function () {
    if (done && fading_div.style.opacity !== '1') {
        done = false;
        for (var i = 1; i <= 100; i++) {
            setTimeout((function (x) {
                return function () {
                    function_fade_in(x)
                };
            })(i), i * 10);
        }
    }
};
// fade out button
fade_out_button.onclick = function () {
    if (done && fading_div.style.opacity !== '0') {
        done = false;
        for (var i = 1; i <= 100; i++) {
            setTimeout((function (x) {
                return function () {
                    function_fade_out(x)
                };
            })(100 - i), i * 10);
        }
    }
};
4

2 に答える 2

0

最後に私は自分自身を見つけました：

<a class="showhide">AAA</a>
<div>show me / hide me</div>
<a class="showhide">BBB</a>
<div>show me / hide me</div>

js

$('.showhide').click(function(e) {
    $(this).next().slideToggle();
    e.preventDefault(); // Stop navigation
});
$('div').hide();

誰かが答えようとしている場合に備えて、これを投稿しています。

于 2013-09-20T10:45:30.187 に答える
0

Fiddleをチェックしてください。必要に応じてコードを編集できます;)

$(function() {
   $('.sub-nav li a').each(function() {
    $(this).click(function() {
       var category = $(this).data('cat');
       $('.'+category).addClass('active').siblings('div').removeClass('active');
    });
  });
});
于 2013-09-20T09:28:32.763 に答える