jquery 选项卡和日期选择器

Question

我想在使用日期选择器选择日期后返回到上次打开的选项卡。我尝试通过获取选定的选项卡来做到这一点。这适用于静态选项卡，但不适用于 ajax 调用，因为该选项卡具有不同的索引号。 我怎样才能最好地做到这一点？

这是我的代码：

        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript" src="js/sitewide.js"></script>
    <script type="text/javascript">
        <!--
        $(function(){

            // Tabs
            $('#tabs').tabs({

                ajaxOptions: { cache: false }
            });

            // Datepicker
            $('.datepicker').datepicker({
                onSelect: showDate
            });

        });


        function showDate(date) {
            var $tabs = $('#tabs').tabs();
            var selected = $tabs.tabs('option', 'selected'); // => 0
            location.href = "./index.php?datum="+date+"#tabs-"+selected;
        }

并在页面正文中：

<div id="tabs">
<ul>
<li><a href="#tabs-1"><span><img src="img/home-klein.png" border="0" height="15"></span></a></li>
            <li><a href="./includes/c-boten.php?datum=<?php echo $start ;?>"><span>C-boten</span></a></li>
            <li><a href="./includes/gladde-boten.php?datum=<?php echo $start ;?>"><span>Gladde boten</span></a></li>
            <li><a href="./includes/jeugd-boten.php?datum=<?php echo $start ;?>"><span>Jeugdboten</span></a></li>
            <li><a href="./includes/wherries.php?datum=<?php echo $start ;?>" id="tabs4"><span>Wherries</span></a></li>
            <li><a href="./includes/stats.php"><span>Kilometerstanden</span></a></li>
            <li><a href="#tabs-6"><span>Weer & Wind</span></a></li>
            <li><a href="./includes/schadekaarten.php"><span>Schadekaarten</span></a></li>
            <?php
            if($_SESSION["anonymous"] != "1"){
            echo "<li><a href=\"#tabs-8\"><span>Uitloggen</span></a></li>";
            }
            ?>

        </ul>

        <div id="tabs-1">
        div 1 text
        </div>

有什么建议吗？

Answer 1

尝试处理选项卡的 select 事件并跟踪变量中的 ui.index 。

例如：

var selectedTab = 0;
$('#tabs').tabs({
    ajaxOptions: { cache: false },
    select: function(event, ui) { selectedTab = ui.index; }
});