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

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