0

第一次在这里发帖，请多多包涵！

我正在使用 jquery ui tabs 插件来创建一个画廊，我想要左右滑动一个小箭头来向用户显示正在显示哪个画廊：

我正在使用的代码是这样的：

<script>
if ($('#wedding-btn').hasClass('ui-state-active')) {
    $('.nav-selector').css('left', '5px');
} else if ($('#portrait-btn').hasClass('ui-state-active')) {
    $('.nav-selector').css('left', '125px');
} else if ($('#landscape-btn').hasClass('ui-state-active')) {
    $('.nav-selector').css('left', '255px');
} else if ($('#blackandwhite-btn').hasClass('ui-state-active')) {
    $('.nav-selector').css('left', '410px');
}   
</script>

这是一个显示我在说什么的链接：http: //www.maxhenchman.co.uk/oh/latest2/

我在这里查看了其他一些文章，上面的代码似乎应该可以工作......但我对 jquery 很陌生，所以我可能错了。

任何帮助都会很棒！

谢谢，

最大限度

编辑约翰尼：

<script type="text/javascript">

    $(document).ready(function() {

        $( "#tabs" ).tabs({
            show: { effect: "fade", duration: 400 },
            hide: { effect: "fade", duration: 800 }
        });

    });

    </script>

    <script type="text/javascript">
            $(document).ready(function() {

            $('#wedding-btn').click(function(){
                if($(this).hasClass('ui-state-active'))
                        $('.nav-selector').css('left', '5px');
                });

            $('#portrait-btn').click(function(){
                if($(this).hasClass('ui-state-active'))
                        $('.nav-selector').css('left', '125px');
                });

            $('#landscape-btn').click(function(){
                if($(this).hasClass('ui-state-active'))
                        $('.nav-selector').css('left', '255px');
                });

            $('#blackandwhite-btn').click(function(){
                if($(this).hasClass('ui-state-active'))
                        $('.nav-selector').css('left', '410px');
                });

            });

    </script>
4

2 回答 2

1

我重新编写了代码并制定了一个解决方案，该解决方案通过使用activate选项卡小部件的事件来正确执行操作：

<script type="text/javascript">
    $(document).ready(function() {

        $( "#tabs" ).tabs({
            show: { effect: "fade", duration: 400 },
            hide: { effect: "fade", duration: 400 },
            activate: function(event, ui) {
                tab = ui.newTab;

                if(tab.is('#wedding-btn'))
                    $('.nav-selector').css('left', '5px');

                else if(tab.is('#portrait-btn'))
                    $('.nav-selector').css('left', '125px');

                else if(tab.is('#landscape-btn'))
                    $('.nav-selector').css('left', '255px');

                else if(tab.is('#blackandwhite-btn'))
                    $('.nav-selector').css('left', '410px');

            }
        });

    });
</script>

删除有关标签问题的所有内容并尝试此问题。

于 2013-05-09T14:07:10.787 回答
0

这是我的最终答案，因为您需要延迟，所以我将 classcheck 包装到一个函数中，并在 .click() 上使用 setTimeout 延迟调用它。这里的代码：

    function check_location(){

        if ($('#wedding-btn').hasClass('ui-state-active')) {
            $('.nav-selector').css('left', '5px');
        } else if ($('#portrait-btn').hasClass('ui-state-active')) {
            $('.nav-selector').css('left', '125px');
        } else if ($('#landscape-btn').hasClass('ui-state-active')) {
            $('.nav-selector').css('left', '255px');
        } else if ($('#blackandwhite-btn').hasClass('ui-state-active')) {
            $('.nav-selector').css('left', '410px');
        }

    }

    $('#tabs').click(function(){

        setTimeout(check_location,1000)

    });
于 2013-05-09T14:12:23.420 回答