在頁面加載/重新加載時設置Jquery ui活動選項卡

Question

我正在使用Jquery UI選項卡的基本實現，它們工作正常，但我想根據用戶操作動態設置（或重置）活動選項卡。

如何根據查詢字符串值設置活動選項卡？ 使用我之前的選項卡解決方案，我能夠傳遞查詢字符串值並在頁面加載時設置活動選項卡。 （由於其他技術挑戰，我不得不放棄這個舊解決方案。）
當用戶在瀏覽器應用程序中選擇“保存”按鈕並重新加載瀏覽器頁面時，如何在按下保存之前將焦點保持在他們所處的選項卡上？
當用戶返回瀏覽器應用程序的“任務”頁面時，如何設置活動選項卡？ 例如，在我的Web應用程序中，如果用戶瀏覽到“項目”頁面然后返回“任務”頁面，我該如何重置之前的選項卡？

使用Javascript：

$(function() {
   $("#tabs").tabs();
});

HTML示例代碼：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Description</a></li>
        <li><a href="#tabs-2">Action</a></li>
        <li><a href="#tabs-3">Resources</a></li>
        <li><a href="#tabs-4">Settings</a></li>
    </ul>

<div id="tabs-1">
    <p>Description content</p>
</div>

<div id="tabs-2">
    <p>Action content</p>
</div>

<div id="tabs-3">
    <p>Resources content</p>
</div>

<div id="tabs-4">
    <p>Settings </p>
</div>

</div>

Answer 1

經過額外的研究和反復試驗后，我解決了自己的jQuery選項卡問題。 這是一個有效的例子。 我不知道這是否是最優雅的解決方案，但它有效。 我希望這有幫助。

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.10.1.custom.min.css">
    <script language="javascript" type="text/javascript" src="js/jquery/jquery-1.9.1.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery/jquery-ui-1.10.1.custom.min.js"></script>

    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $("#tabs").tabs({active: document.tabTest.currentTab.value});

            $('#tabs a').click(function(e) {
                var curTab = $('.ui-tabs-active');
                curTabIndex = curTab.index();
                document.tabTest.currentTab.value = curTabIndex;
            });
        });
    </script>
</head>

<body>
    <form name="tabTest" method="post" action="tab">
        <!-- default tab value 2 for Tab 3 -->            
        <input type="hidden" name="currentTab" value="2"/> 
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Tab 1</a></li>
                <li><a href="#tabs-2">Tab 2</a></li>
                <li><a href="#tabs-3">Tab 3</a></li>
            </ul>
            <div id="tabs-1">Tab 1 Content</div> 
            <div id="tabs-2">Tab 2 Content</div>
            <div id="tabs-3">Tab 3 Content</div>
        </div>
    </form>
</body>

以下是我回答以前每個問題的方法。

1.如何根據查詢字符串值設置活動選項卡？ 我最終不需要使用查詢字符串。 我將＃tabs-x添加到我的網址末尾。 例如，如果我想直接鏈接到Tab 3，我將鏈接編碼為：

localhost:8080/pm/detail?prjID=2077#tabs-3

2.當用戶在瀏覽器應用程序中選擇“保存”按鈕並重新加載瀏覽器頁面時，如何在按下保存之前將焦點保持在他們所處的選項卡上？

我通過捕獲click事件，獲取當前選項卡索引，然后設置隱藏的表單元素“currentTab”來存儲當前選項卡值來解決這個問題。 然后回到Java Servlet中，我檢索了隱藏的表單元素，並在頁面重新加載時重置它。

$(document).ready(function() {
        // Set active tab on page load
        $("#tabs").tabs({active: document.tabTest.currentTab.value});

        // Capture current tab index.  Remember tab index starts at 0 for tab 1.
        $('#tabs a').click(function(e) {
            var curTab = $('.ui-tabs-active');
            curTabIndex = curTab.index();
            document.tabTest.currentTab.value = curTabIndex;
        });
    });

3.當用戶返回瀏覽器應用程序的“項目”頁面時，如何設置活動選項卡？ 例如，在我的Web應用程序中，如果用戶瀏覽“任務”頁面然后返回“項目”頁面，我該如何重置之前使用的選項卡？

這可以通過在我的Java Servlet中設置一個會話變量來存儲隱藏的表單元素“currentTab”來解決。 這樣，當我返回Project頁面時，我可以重置“currentTab”值，就像我在Save forms action中設置它一樣。

我希望這個例子可以幫助其他人解決他們的jQuery選項卡問題！

Answer 2

jQuery UI選項卡可以接受選項。 對您的問題特別有用的是cookie和selected 。 您可以在這里閱讀有關選項的信息。

Answer 3

     var currentTab = $('.ui-state-active a').index();
    currentTab = $('#divMainContent').find('#sel_tab')[0].value;

注意：Sel_tab是隱藏字段的位置。 onclick on tabs achor link為隱藏的feild分配值

在頁面加載/重新加載時設置Jquery ui活動選項卡

問題描述

3 個解決方案

解決方案1
13 已采納 2013-03-21 14:07:54

解決方案2
0 2013-03-14 23:02:26

解決方案3
0 2015-02-18 17:44:25

在頁面加載/重新加載時設置Jquery ui活動選項卡

問題描述

3 個解決方案

解決方案1 13 已采納 2013-03-21 14:07:54

解決方案2 0 2013-03-14 23:02:26

解決方案3 0 2015-02-18 17:44:25

解決方案1
13 已采納 2013-03-21 14:07:54

解決方案2
0 2013-03-14 23:02:26

解決方案3
0 2015-02-18 17:44:25