Question

首先发布在这里，请耐心等待我！

我正在使用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>

Answer 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>

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

Answer 2

这是我的最终答案，因为你需要延迟我将classcheck包装到一个函数中并使用setTimeout延迟调用.click（）。代码如下：

    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)

    });

hasClass if语句导航

2 个答案: