分裂之间的淡入和淡出

时间:2015-06-30 18:27:39

标签: javascript jquery html css

我有一个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);
    });

});

请帮助。

3 个答案:

答案 0 :(得分:0)

您应该只使用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",因为这些必须是唯一的。

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

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