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"，因为这些必须是唯一的。

Answer 2

您必须定位要淡化的元素。

以下是一个示例：https://jsfiddle.net/LL6w28xx/1/

此外，您不能在元素上重复id。

Answer 3

https://jsfiddle.net/0rqzh404/47/这样的事情？使用像$('.btn')这样的单个类也是一种简单的方法，也可以将多个操作组合在一起。

分裂之间的淡入和淡出

3 个答案: