1

这个 jQuery 运行许多隐藏框动画，fadeOuts，fadeIns 等...

这是一个工作的jsfiddle

http://jsfiddle.net/xpancom/FNF3z/

您将在左侧看到每个示例链接都显示三个隐藏框。当您单击另一个链接时，它会隐藏这三个并显示三个不同的链接。

这只是一个示例，我的一些页面有 10 组三个隐藏框...运行所有这些的 jQuery 超过 300 行。

目前我有这样的 ID 链接

<li><a href="#" id="click1-12">Sample 1</a></li>
<li><a href="#" id="click1-13">Sample 2</a></li>

以及运行动画淡入和淡出以及链接的活动状态的 jQuery

    $("#click1-12").click(function() {
    $("#work-uscg1 a").removeClass("work-active");
    $.fn.closeBoxes();
    $('#work-uscg1').delay(400).fadeIn();
    $('#work-uscg2').delay(600).fadeIn();
    $('#work-uscg3').delay(800).fadeIn();
    $('#work-uscg3a').delay(400).fadeIn();
    $("#click1-12").addClass("nav-active");
    $("#click2-11a").addClass("work-active");
});
$("#click1-13").click(function() {
    $("#work-toy1 a").removeClass("work-active");
    $.fn.closeBoxes();
    $('#work-toy1').delay(400).fadeIn();
    $('#work-toy2').delay(600).fadeIn();
    $('#work-toy3').delay(800).fadeIn();
    $('#work-toy3a').delay(400).fadeIn();
    $("#click1-13").addClass("nav-active");
    $("#click3-11a").addClass("work-active");
});

感谢您就如何创建更优雅的解决方案提供任何建议。

4

1 回答 1

1

好吧，我进行了一些重组，让自己更轻松地完成它，我在这里只是给你一个大致的想法，但是利用每个列表项的索引与实际内容相比可能是一个不错的选择。这是一些通用标记：

<div id="nav">
    <ul>
        <li><a href="#">Sample 1</a></li>
        <li><a href="#">Sample 2</a></li>
        <li><a href="#">Sample 3</a></li>
    </ul>
</div>

<div id="content">
    <div class="item">
        <div class="block-1">content 1-1</div>
        <div class="block-2">content 1-2</div>
        <div class="block-3">content 1-3</div>
    </div>

    <div class="item">
        <div class="block-1">content 2-1</div>
        <div class="block-2">content 2-2</div>
        <div class="block-3">content 2-3</div>
    </div>

    <div class="item">
        <div class="block-1">content 3-1</div>
        <div class="block-2">content 3-2</div>
        <div class="block-3">content 3-3</div>
    </div>
</div>

我刚开始用css隐藏了元素：

.item div {
    display: none;
}

现在是有趣的部分...... javascript！好吧，jQuery，但你明白我的意思。基本上你想要的是一个函数能够控制你想要影响的每个元素。所以，就像我说的，我利用点击元素的索引来改变实际内容的状态：

var navClick = function() {
    var arrPosition = $(this).closest('li').index();
    var $targetDiv = $('#content').find('.item').eq(arrPosition);
    $targetDiv.find('.block-1').delay(400).fadeToggle();
    $targetDiv.find('.block-2').delay(600).fadeToggle();
    $targetDiv.find('.block-3').delay(800).fadeToggle();
}

$('#nav a').on('click', navClick);

您的标记总体上可以使用一些清理，以及您正在使用的 JS。使用我的方法，您甚至不需要为每个元素指定特定的 ID。如果您有任何问题，请告诉我！

哦，这是给你的小提琴。http://jsfiddle.net/cArA3/1/

于 2013-02-05T05:32:12.880 回答