javascript - Js 和 Divs，（甚至是区别）

Question

我找到了一个非常适合显示DIV的 javascript 代码。但此代码仅适用于为每个页面显示一个div。我想在同一页面中包含许多用于隐藏和显示的 DIVS。

我试图用每个包含的随机 php 编号替换div id和显示/隐藏跨度 id，但仍然无法正常工作。

那我该怎么做呢？

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);
        }
    }
};

Answer 1

finaly i found my self:

<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();

Am just posting this in case someone was trying to answer.

Answer 2

查看Fiddle，您可以根据需要编辑代码；）

$(function() {
   $('.sub-nav li a').each(function() {
    $(this).click(function() {
       var category = $(this).data('cat');
       $('.'+category).addClass('active').siblings('div').removeClass('active');
    });
  });
});