1

当用户单击选项卡时，我正在尝试创建可扩展的展开。

它基本上是 2 行选项卡，每行都有自己的颜色，当用户单击其中一个时，隐藏的 DIV 应该动画出来。我不认为这很难做到，但是当用户在另一个选项卡已经打开的情况下单击另一个选项卡时，就会出现问题。然后新内容必须取代现有内容的位置。

这就是我到目前为止所拥有的； http://jsfiddle.net/craigzilla/W3afW/

                     4张图片代表应该发生的事情
                      当您单击选项卡 01、02、03 和 08 时
4

2 回答 2

2

jsFiddle 演示

$(document).ready(function() {
    var $cont;    
    function tgl_conts(){
        $('.content').stop().animate({height: 0},1200);
        $cont.stop().animate({height:210},1200);
    }
    
    $('.tab').on('click',function(){
        var tabClass=$(this).attr('class').split(' ')[1];
        $cont = $('.'+tabClass+':not(.tab)');
        var h = ($cont.height() === 0) ? tgl_conts() :  ( $cont.stop().animate({height: 0},1200) );  
    });

});

小心！！！我删除了您的所有 ID（也包括 CSS），并为您的重复项添加了单独的类：

.turquoise.turquoise2
同样的，因为.pink .pink2每个元素都有 2 个元素，我们必须区分它们！

PS：实用性不错！很好的表达，好主意兄弟！

编辑
为 jQuery UI 库添加了“速度”（动画时间）和缓动设置：

缓动演示

于 2012-04-22T19:59:55.543 回答
0

好的......所以基本上你想要做的是<div>在你的每个选项卡中都有一个元素。当用户单击其中一个选项卡时，jQuery 将确保没有其他“弹出”的 div 元素可见，然后显示相应的 div。

我将以 3 个标签为例 -

<div class="tab" id="pink">
    <img src="http://placehold.it/160x160" width="160" height="160" />
    <span class="tab_text">TITLE 01</span>
    <div class="pop-out">Some pink information</div>
</div>
<div class="tab" id="turquoise">
    <img src="http://placehold.it/160x160" width="160" height="160" />
    <span class="tab_text">TITLE 02</span>
    <div class="pop-out">Some turquoise information</div>
</div>
<div class="tab" id="yellow">
    <img src="http://placehold.it/160x160" width="160" height="160" />
    <span class="tab_text">TITLE 03</span>
    <div class="pop-out">Some yellow information</div>
</div>

请注意，每次我使用id属性时，它们都是唯一的。该id属性应始终具有唯一值，而不是class您可以看到的属性可以具有相同的值。class="pop-out"

  • pop-out将是我们识别所有弹出 div 元素的方式
  • 当用户单击选项卡时，我们将添加一个附加sel类（selected 的缩写）。这样我们就可以跟踪上次打开的 div（如果有的话），并确保在打开新的之前关闭它。

现在，假设我们希望触发器是整个选项卡。用户点击它的任何地方都会触发弹出窗口。

$(".tab").on('click',function(){
  $("div.pop-out.sel").fadeOut().removeClass('sel'); // this will hide the last selected div and remove its selected class
  $(this).find("div.pop-out").fadeIn().addClass('sel'); // this will display the div of the element the user clicked and add the selected class.
}

显然，您可以替换任何您想要的动画。

现在我们还可以使用以下方法跟踪打开的选项卡 -

$("div.pop-out.sel").closest("div.tab");

这将返回当前正在显示的弹出 div 的父级。记得先测试一个选定的 div 是否 真的存在 :)

于 2012-04-22T19:23:56.397 回答