logo标签列表

页面加载/重新加载时设置Jquery UI活动选项卡

javascriptjqueryjsp
9

我正在使用基本的Jquery UI Tabs实现，目前运行良好。但是我希望能够根据用户操作动态地设置（或重置）活动选项卡。

  1. 如何基于查询字符串值设置活动选项卡？之前使用的选项卡解决方案可以在页面加载时传递查询字符串值并设置活动选项卡。（因其他技术挑战而放弃了此旧解决方案。）

  2. 当用户在浏览器应用中选择保存按钮并重新加载浏览器页面时，如何保持焦点在他们在保存之前所在的选项卡上？

  3. 当用户返回我的浏览器应用程序的任务页面时，如何设置活动选项卡？例如，在我的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>
解析URL以为**active option**设置值。 - charlietfl
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. 如何根据查询字符串设置活动选项卡？ 最终，我不需要使用查询字符串。我在我的URL末尾添加了#tabs-x。例如，如果我想要直接链接到第三个选项卡，我编写了以下链接：

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 应用程序中，如果用户浏览到任务页面，然后返回项目页面，如何重置他们之前所在的选项卡？

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

希望这个示例能帮助其他人解决 jQuery 选项卡问题！

0

jQuery UI Tabs可以接受选项。对于您的问题，特别有用的选项是cookie和selected。您可以在这里阅读有关这些选项的信息。

我之前已经阅读过这个，但是我不明白如何将其集成到我的页面代码中，也不知道如何访问和使用查询字符串值。你能提供一个简单的工作示例吗？谢谢！ - user1405736
1
$( ".selector" ).tabs({ selected: 3 }); 将使第四个选项卡最初处于活动状态，而 $( ".selector" ).tabs({ cookie: { expires: 30 } }); 则会将上次活动的选项卡保留30天。请注意，您需要使用cookie插件：http://archive.plugins.jquery.com/project/Cookie - Erica Xu
0
     var currentTab = $('.ui-state-active a').index();
    currentTab = $('#divMainContent').find('#sel_tab')[0].value;

注意：其中Sel_tab是隐藏字段。 在选项卡锚链接上单击时，将值分配给隐藏字段。
<asp:HiddenField ID="sel_tab" ClientIDMode="Static" Value="0" runat="server" /><div id="tabs" class="tabs" style="width:auto;"> <ul> <li><a href="#tabs-1" tabindex="0" onclick="document.getElementById('sel_tab').value=0; ">分配库存</a></li> - Prianca
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接