使用 URL 中的参数选择 jQuery 选项卡

发布于 2024-07-13 14:20:07 字数 281 浏览 5 评论 0原文

我目前正在研究用 jQuery UI 提供的选项卡替换 Struts 1 标记库提供的选项卡。我已成功地将选项卡与现有应用程序集成，但我正在努力解决如何使用传入 URL 上的参数（即 myurl.com/action.do?selectedTab=SecondTab）设置所选选项卡。

我是 JavaScript 和 jQuery 的新手；有哪些关于从哪里开始的建议？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

思念满溢 2024-07-20 14:20:07

Jquery-UI 为您提供（几乎）免费的功能：使用内部链接。而且它比使用丑陋的 get 参数要好。

传递 http://my.site.org/mypage/#foo-tab 在导航器中将自动选择容器具有 id="foo-tab" 的选项卡。

诀窍是添加一个事件来在选择选项卡时更新 url，这样当您重新加载时就不会丢失当前选项卡：

   $(document).ready(function () {
        $("#tabs").bind('tabsselect', function(event, ui) {
            window.location.href=ui.tab;
        });
    });

Jquery-UI give you that for (almost) free : Use the internal links. And it's better than using ugly get parameters.

Passing http://my.site.org/mypage/#foo-tab in your navigator will automaticly select the tab with the container having id="foo-tab".

The trick is to add an event to update the url when selecting a tab so that when you reload you do not lose the current tab :

   $(document).ready(function () {
        $("#tabs").bind('tabsselect', function(event, ui) {
            window.location.href=ui.tab;
        });
    });

回复收藏 0 原文

暖心男生 2024-07-20 14:20:07

使用 http://www.mathias-bank .de/2007/04/21/jquery-plugin-geturlparam-version-2：

$(document).ready(function(){
    var param = $(document).getUrlParam('selectedTab');
    $('#menu').tabs('select', param);
});

来自文档：

#select

签名：

.tabs( 'select' , [index] )

选择一个选项卡，就像被单击一样。第二个参数是要选择的选项卡的从零开始的索引或与选项卡关联的面板的 id 选择器（选项卡的 href 片段标识符，例如散列，指向面板的 id）。

Using http://www.mathias-bank.de/2007/04/21/jquery-plugin-geturlparam-version-2:

$(document).ready(function(){
    var param = $(document).getUrlParam('selectedTab');
    $('#menu').tabs('select', param);
});

From documentation:

#select

Signature:

.tabs( 'select' , [index] )

Select a tab, as if it were clicked. The second argument is the zero-based index of the tab to be selected or the id selector of the panel the tab is associated with (the tab's href fragment identifier, e.g. hash, points to the panel's id).

回复收藏 0 原文

人心善变 2024-07-20 14:20:07

我有一个稍微不同的方法，不一定依赖于内置的 select() 函数，但确实使用 livequery 插件：

http://plugins.jquery.com/project/livequery/

这是 jQuery live 功能的更强大版本。它可以轻松绑定与查询匹配的未来元素。

假设你有一个如下的 tabs 结构：

<div class="Tabs">
<ul class="nav">
<li><a id="tab1">Link 1</a></li>
<li><a id="tab2">Link 2</a></li>
<li><a id="tab3">Link 3</a></li>
</ul>
..
..
</div>

理想情况下，你想要一个像这样的 URL 结构：

mydomain/mypage?tab=tab2

它变得相当棘手，因为 select() 方法只支持整数索引，当你改变 tabs 时会发生什么？

假设您可以将 url 参数获取到如上所述的变量中，以执行以下操作：

首先找到目标元素并向其添加一个类：

jQuery('a#' + param).addClass('selectMe');

接下来将 livequery 函数绑定到该元素：

jQuery('.ui-tabs-nav a.selectMe').livequery(function(){
 jQuery(this).removeClass('selectMe').triggerHandler('click');
});

只有在选项卡被选中后才会匹配它-化并实际上“点击”它。

然后，您可以不带参数调用选项卡函数：

jQuery(".Tabs").tabs();

完成后，将自动单击并选择该选项卡！

更好的是，您可以将选项卡创建绑定到 livequery 本身：

jQuery(".Tabs").livequery(function(){
    jQuery(this).tabs();    
});

这样您拥有的类“.Tabs”的任何元素都将在加载时自动转换为选项卡，无论是现在还是将来！

I've got a slightly different approach that doesn't necessarily rely on the built-in select() function, but does use the livequery plugin:

http://plugins.jquery.com/project/livequery/

which is a more powerful version of the jQuery live function. It can easily bind future elements that match a query.

Suppose you have a tabs structure as follows:

<div class="Tabs">
<ul class="nav">
<li><a id="tab1">Link 1</a></li>
<li><a id="tab2">Link 2</a></li>
<li><a id="tab3">Link 3</a></li>
</ul>
..
..
</div>

ideally, you want a URL structure like this:

mydomain/mypage?tab=tab2

it becomes quite tricky because the select() method only supports integer indices, and what happens when you change your tabs around?

Supposing you can get the url parameter into a variable as indicated above to do the following:

First you locate your target element and add a class to it:

jQuery('a#' + param).addClass('selectMe');

Next you bind a livequery function to the element:

jQuery('.ui-tabs-nav a.selectMe').livequery(function(){
 jQuery(this).removeClass('selectMe').triggerHandler('click');
});

This will match it only once it's been tab-ified and virtually 'click' it.

Then, you can call your tabs function with no parameters:

jQuery(".Tabs").tabs();

and once it's complete, the tab will automatically be clicked and selected!

Better yet, you can bind the tabs creation to livequery itself:

jQuery(".Tabs").livequery(function(){
    jQuery(this).tabs();    
});

so that any elements you have with class '.Tabs' will automatically be converted into tabs upon load, now or in the future!

回复收藏 0 原文

╄→承喏 2024-07-20 14:20:07

下面的 jQuery 插件链接似乎是一个可能的解决方案候选者，因为它为您提供了 URL 和组件部分。然后，您可以将值与要选择的选项卡的索引或通过 jQuery 选择器按 id 或类进行匹配：

http://www.oakcitygraphics.com/jquery/jqURL/jqURLdemo.html?var1=1&var2=2&var3= 3

回复收藏 0 原文

~没有更多了~

关于作者

往昔成烟

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

使用 URL 中的参数选择 jQuery 选项卡

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

内心激荡

JSmiles

赏烟花じ飞满天

左秋

迪街小绵羊

瞳孔里扚悲伤

友情链接

使用 URL 中的参数选择 jQuery 选项卡

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

内心激荡

JSmiles

赏烟花じ飞满天

左秋

迪街小绵羊

瞳孔里扚悲伤

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。