8

我正在使用运行良好的 Jquery UI 选项卡的基本实现，但我想根据用户操作动态设置（或重置）活动选项卡。

  1. 如何根据查询字符串值设置活动选项卡？使用我以前的选项卡解决方案，我能够传递一个查询字符串值并在页面加载时设置活动选项卡。（由于其他技术挑战，我不得不放弃这个旧的解决方案。）

  2. 当用户在我的浏览器应用程序中选择“保存”按钮并重新加载浏览器页面时，我如何才能将注意力集中在他们按下保存之前所在的选项卡上？

  3. 当用户返回到我的浏览器应用程序的任务页面时，如何设置活动选项卡？例如，在我的 Web 应用程序中，如果用户浏览到 Projects 页面然后返回到 Task 页面，我如何重置他们之前所在的选项卡？

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

3 回答 3

13

经过额外的研究和反复试验，我解决了我自己的 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. 当用户在我的浏览器应用程序中选择“保存”按钮，并且浏览器页面重新加载时，我如何才能将焦点保持在他们按下保存之前所在的选项卡上？

我通过捕获单击事件、获取当前选项卡索引然后设置隐藏表单元素“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 应用程序中，如果用户浏览到 Task 页面然后返回到 Project 页面，我如何重置他们之前所在的选项卡？

这可以通过在我的 Java Servlet 中设置一个会话变量来存储隐藏的表单元素“currentTab”来解决。这样，当我返回项目页面时，我可以重置“currentTab”值，就像在“保存表单”操作中设置它一样。

我希望这个例子可以帮助其他人解决他们的 jQuery 标签问题！

于 2013-03-21T14:07:54.047 回答
0

jQuery UI 选项卡可以接受选项。对您的问题特别有用的是cookie和selected。您可以在此处阅读有关选项的信息。

于 2013-03-14T23:02:26.830 回答
0 
     var currentTab = $('.ui-state-active a').index();
    currentTab = $('#divMainContent').find('#sel_tab')[0].value;

注意：其中 Sel_tab 是隐藏字段。onclick 选项卡 achor 链接为隐藏字段赋值

于 2015-02-18T17:44:25.323 回答