jquery 个选项卡的切换箭头

Question

我到处都找遍了，还是想不通。我基本上已经设置了一些自定义 jquery 选项卡，这里是我拥有的 javascript 和 fiddle，我想我需要添加它吗？

    $(function() {
$("#tabs").tabs({
   collapsible: true,
   hide: 'slideUp', show: 'slideDown',
   active: false
});   
    });

http://jsfiddle.net/benopp/jadpcdvr/3/

如果您查看 fiddle，我基本上需要在单击选项卡的任何部分时将箭头指向上方，与手风琴切换的工作方式相同，箭头指向下方，单击时指向备份。（我需要它，所以整个选项卡都会触发它，而不仅仅是箭头会触发）

Answer 1

您可以在选项卡小部件上使用 beforeActivate 事件来检测选项卡何时更改。

http://api.jqueryui.com/tabs/#event-beforeActivate

然后将所有箭头设置为向下，查看是否有任何选项卡展开，将其箭头设置为向上：

$("#tabs").tabs({
    collapsible: true,
    hide: 'slideUp',
    show: 'slideDown',
    active: false,
    beforeActivate: function (event, ui) {
        //first set all arrows down:
        $("#tabs .arrow img").prop("src", "http://upload.wikimedia.org/wikipedia/commons/f/ff/White_Arrow_Down.svg");
        console.log(ui);
        if (ui.newTab.length > 0){
            ui.newTab.find(".arrow img").prop("src", "http://upload.wikimedia.org/wikipedia/commons/7/76/White_Arrow_Up.svg");
        }
    }
});

Updated FIDDLE

jquery 个选项卡的切换箭头

Toggle arrow for jquery tabs

jquery

jquery-mobile

tabs

toggle