javascript - 在分区之间淡入淡出

Question

我有一个包含 3 个按钮的菜单，我想做的是隐藏 item11、item22 和 item33 的图像。当我点击按钮 a 时，item11 淡入，如果我点击 b，item11 淡出，item22 淡入，依此类推。

我有这个用于菜单和分区的 jsfiddle:https://jsfiddle.net/0rqzh404/1/

我有这个淡入/淡出功能，但我不确定如何连接到 html。

JQUERY:

$(document).on('click','#item1', function()
{


$("").fadeOut(1000, function(){
        $("").hide();
        $("").show();
        $("").fadeIn(1000);
    });

});

    $(document).on('click','#item2', function()
{ 
    $("").fadeOut(1000, function(){
        $("").hide();
        $("").show();
        $("").fadeIn(1000);
    });

});

    $(document).on('click','#item3', function()
{ 
    $("").fadeOut(1000, function(){
        $("").hide();
        $("").show();
        $("").fadeIn(1000);
    });

});

请帮忙。

Answer 1

您应该只使用 li 按钮，它们将获取元素的 ID，因此您可以这样做:

$(".item").hide();
$(".headlines li").click(function(){
    var el = $(this), id = el.attr("id").match(/\d+$/)[0], iditem = "#item" + id+id;
    $(".item").not(iditem).fadeOut(); //Hide elements
    $(iditem).fadeIn()//Just show one element
});

Demo JSfiddle

我提醒您，我必须将 id="item11", id="item11", id="item11" 之类的 ID 替换为 id="item11", id= "item22", id="item33"，因为它们必须是唯一的。