栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

经过更多研究和反复试验后,我解决了自己的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。例如,如果我想直接链接到选项卡3,则将链接编码为:

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

2.当用户在我的浏览器应用程序中选择“保存”按钮,并且浏览器页面重新加载时,如何在按下保存按钮之前将焦点保持在他们所在的选项卡上?

我通过捕获click事件,获取当前选项卡索引,然后设置一个隐藏的表单元素“ currentTab”来存储当前选项卡值来解决此问题。然后回到Java
Servlet中,我检索了隐藏的form元素,并在重新加载页面时将其重置。

$(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标签问题!



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/443431.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号