分裂之間淡入淡出

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

演示JSfiddle

我提醒你，我必須將id="item11", id="item11", id="item11" id="item11", id="item22", id="item33" id="item11", id="item11", id="item11"為id="item11", id="item22", id="item33" ，因為這些必須獨一無二。

Answer 2

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

這是一個例子： https ： //jsfiddle.net/LL6w28xx/1/

你也不能在元素上有重復的id 。

Answer 3

https://jsfiddle.net/0rqzh404/47/這樣的東西？ 使用像$('.btn')這樣的單一類是一種簡單的方法，也可以將多個動作組合在一起。