Question

我正在使用Jquery UI标签，并将其设置为在每次幻灯片更改时切换不透明度。我想知道是否有办法将不透明度切换应用于每个选项卡中的单个元素，而不是整个选项卡。我对jQuery的理解非常基础，所以请耐心等待。

所以，如果我有这样的事情：

<div id="tabs">
   <ul id="tabs-nav><li></li></ul>
   <div id="tab-1">
      <img />
      <p />
   </div>
   <div id="tab-2">
      <img />
      <p />
   </div>
   ...etc
</div>

如何设置它以便仅<img>应用效果，其余只是正常切换？

以下是我对UI标签的调用的基础知识：

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

更新：所以这是我根据karim79的建议最终得到的结果，它似乎有效。我在上面显示的原始代码之后添加了此内容（并从原始代码中删除了{fx: { opacity: 'toggle' } }）：

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

我要解释我的逻辑，因为就像我说的那样，我的理解是基本的，所以我很想知道我的理由是否已经解决了！

我删除了karim79的coniditional语句，因为我希望这适用于所有标签。我是否理解if(ui.index == 2)仅适用于第三个标签？

然后，我将.css("opacity", 0.6)更改为.fadeOut().fadeIn()，因为.css不透明度只是成功使所有幻灯片半透明，但不会使任何内容淡入或淡出。

这是否是一种可接受的方式，或者它是否以某种方式破解？

Answer 1

这应该这样做：

$( ".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选项卡：将不透明度切换应用于特定的内部元素？

1 个答案: