一千萬個為什麽

搜索

JQuery UI選項卡:將不透明度切換應用於特定的內部元素?

我正在使用Jquery UI選項卡,並將其設置為在每次幻燈片更改時切換不透明度。我想知道是否有辦法將不透明度切換應用於每個選項卡中的單個元素,而不是整個選項卡。我對jQuery的理解非常基礎,所以請耐心等待。

所以,如果我有這樣的事情:

<div id="tabs">
   
    </div> <div id="tab-2"> </div> ...etc </div>

    How could I set it so that only the has an effect applied, and the rest just switches normally?

    Here are the basics of the call I have for UI tabs:

var $tabs = $('#slides').tabs({fx: { opacity: 'toggle' } });
$(".ui-tabs-panel").each(function(i){
    //stuff to create previous/next links
});
$('.next-tab, .prev-tab').click(function() {  
   $tabs.tabs('select', $(this).attr("rel"));
   return false;
});

UPDATE: So this is what I ended up with based on karim79's suggestions, and it seems to work. I added this after the original code I showed above (and removed {fx: { opacity: 'toggle' } } from my original code):

$( "#slides" ).bind( "tabsselect", function(event, ui) {
        $(ui.panel).find("img").fadeOut().fadeIn();
});

I'm going to explain my logic, because like I said, my understanding is basic, so I'd love to know if my rationale is off!

I removed karim79's coniditional statement, because I want this to apply to ALL of the tabs. Am I correct in understanding that an if(ui.index == 2) would only apply to the third tab?

Then, I changed the .css("opacity", 0.6) to .fadeOut().fadeIn() because the .css opacity was only succeeding in making all of the slides semi-transparent, but not fading anything in or out.

Would this be an acceptable way of doing this or is it somehow hackish?

最佳答案

這應該這樣做:

$( ".selector" ).bind( "tabsselect", function(event, ui) {
    if(ui.index == 2) {//or whatever index you're interested in
        $(ui.panel).find("img").css("opacity", 0.6);
    }
});

轉載註明原文: JQuery UI選項卡:將不透明度切換應用於特定的內部元素?