关闭其他面板,然后打开另一个

时间:2015-06-17 02:39:48

标签: jquery tabs slider panels

我环顾四周,无法找到或弄清楚这一点。也许我已经看到了一些东西,但不知道如何将它整合到我所拥有的......我不确定。我决定吞下自己的骄傲并问。我是Javascript / jquery的新手,我被困住了。

我创建了一行按钮,所有按钮都滑动了一个面板。我让所有按钮都正常工作,缺少一件事。我希望一次只打开一个面板。因此,如果一个面板打开并且我点击了另一个按钮,则打开的面板将会滑动,然后下一个面板会滑动。

如果我的脚本是一个小小的皱纹,那么任何评论都会受到赞赏。

谢谢。

该网站的链接是http://greenmountainfarmtoschool.org/dev_site/

我的jQuery:

jQuery(function ($) {

    $(document).ready(function() {

        $(function () {
            $('.action-btn').on('click', function () {
                var sliderID = $(this).attr('data-sliderid');
                if ($('.' + sliderID).is(":hidden")) {
                    $('.' + sliderID).slideDown("slow");
                } 
                if($(div).hasClass('down')) {
                    .slideUp("slow");
                }
                else {
                    $('.' + sliderID).slideUp("slow");
                }
            });
        });

    });//end of docready 

    $(window).load(function() { });//end of windowload

});//end of $ block 

2 个答案:

答案 0 :(得分:1)

jQuery(function($){

$(document).ready(function() {

    $(function () {
        $('.action-btn').on('click', function () {
            /**
            * since all the sliders are also in a 'wrapper' class, just 
            * slideUp all the wrapper, then slideDown the one you want.
            */
            $('wrapper').slideUp("slow"); 

            var sliderID = $(this).attr('data-sliderid');
            if ($('.' + sliderID).is(":hidden")) {
                $('.' + sliderID).slideDown("slow");
            } 
            if($(div).hasClass('down')) {
                .slideUp("slow");
            }
            else {
                $('.' + sliderID).slideUp("slow");
            }
        });
    });

});//end of docready 

$(window).load(function() { });//end of windowload

});//end of $ block 

另一种方法是使用jQuery UI选项卡,只需设置样式,因为它们已经实现了您想要的行为。

答案 1 :(得分:0)

所以在查看和了解jQuery的Tab UI之后,我无法弄清楚如何让它适用于我想要做的事情。 所以我和朋友想出了这段代码。 以为我会发布给其他人使用它。希望它能帮到某个人。

HTML:

<div class="section group">
<div class="col span_1_of_4 sub-btn hvr-reveal action-btn centerText" data-sliderid="ourPurposeSlider">
    <h3>Our Purpose</h3>
</div>
<div class="col span_1_of_4 sub-btn hvr-reveal action-btn centerText" data-sliderid="whereWeWorkSlider">
    <h3>Where We Work</h3>
</div>
<div class="col span_1_of_4 sub-btn hvr-reveal action-btn centerText" data-sliderid="staffSlider">
    <h3>Meet the Staff</h3>
</div>
<div class="col span_1_of_4 sub-btn hvr-reveal action-btn centerText" data-sliderid="boardSlider">
    <h3>Meet the Board</h3>
</div>

jQuery的:

$(function () {
        $('.action-btn').on('click', function () {
            var sliderID = $(this).attr('data-sliderid');


            if( $('.active')[0] && !$('.' + sliderID).hasClass("active") ){
                $('.active').slideUp("slow", function(){
                    $(this).removeClass('active');
                    $('.' + sliderID).slideDown("slow").addClass("active");
                });
            }else if( $('.active')[0] && $('.' + sliderID).hasClass("active") ){
                $('.' + sliderID).slideUp("slow").removeClass("active");
            }else{
                $('.' + sliderID).slideDown("slow").addClass("active");
            };               

        });
    });