blocks|key|1407365|text|在您的事件处理函数中，ui.tab是一个锚元素。您可以像这样检索它的哈希值：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1407366|$("#tabs+>+ul").tabs();
$("#tabs+>+ul").bind("tabsshow",+function(event,+ui)+{+
++++window.location.hash+=+ui.tab.hash;
})|code-block|syntax|javascript|1407367|这对你有效吗？|1407368|entityMap^0|B|6|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

In your event handler function <code>ui.tab</code> is an anchor element. You can retrieve its hash value like this:

<pre><code>$("#tabs &gt; ul").tabs();
$("#tabs &gt; ul").bind("tabsshow", function(event, ui) { 
 window.location.hash = ui.tab.hash;
})
</code></pre>

Does this work for you?

blocks|key|1622273|text|$('#tabs').tabs({
++++select:+function(event,+ui)+{
++++++++window.location.hash+=+ui.tab.hash;
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1622274|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$('#tabs').tabs({
 select: function(event, ui) {
 window.location.hash = ui.tab.hash;
 }
});
</code></pre>

blocks|key|1407516|text|虽然上面的一些解决方案有效，但它们在某些情况下会导致页面跳转，因为window.location.hash应用编程接口是为将您带到页面的特定部分而设计的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1407517|这个整洁的解决方案提出了here，解决了这个问题|offset|length|1407518|++$("#tabs").bind("tabsshow",+function(event,+ui)+{+
++++history.pushState(null,+null,+ui.tab.hash);
++});|code-block|syntax|javascript|1407519|entityMap|0|LINK|mutability|MUTABLE|url|http://lea.verou.me/2011/05/change-url-hash-without-page-jump/^0|0|C|4|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

While some of the above solutions work, they cause the page to jump around in some cases, as the window.location.hash API is designed to bring you to a specific part of the page.

This neat solution proposed <a href="http://lea.verou.me/2011/05/change-url-hash-without-page-jump/" rel="noreferrer">here</a>, solves that issue

<pre><code> $("#tabs").bind("tabsshow", function(event, ui) { 
 history.pushState(null, null, ui.tab.hash);
 });
</code></pre>

blocks|key|1622393|text|这对我来说很有效，jQuery+UI+1.10：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1622394|$('#elexumaps_events_tabs').tabs({
++++activate:+function(event,+ui)+{+
+++++++window.location.hash=ui.newPanel.selector;+
++++}
});|code-block|syntax|javascript|1622395|另请参阅：http://api.jqueryui.com/tabs/#event-activate|offset|length|1622396|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jqueryui.com/tabs/#event-activate^0|0|0|5|18|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

This worked for me, jQuery UI 1.10:

<pre><code>$('#elexumaps_events_tabs').tabs({
 activate: function(event, ui) { 
 window.location.hash=ui.newPanel.selector; 
 }
});
</code></pre>

See also: <a href="http://api.jqueryui.com/tabs/#event-activate">http://api.jqueryui.com/tabs/#event-activate</a>

blocks|key|1407814|text|我的简单解决方案不需要跳跃：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1407815|++++$("#tabs").tabs({
++++++++activate:+function+(event,+ui)+{
++++++++++++var+scrollPos+=+$(window).scrollTop();
++++++++++++window.location.hash+=+ui.newPanel.selector;
++++++++++++$(window).scrollTop(scrollPos);
++++++++}
++++});|code-block|syntax|javascript|1407816|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

my simple solution without jumping:

<pre><code> $("#tabs").tabs({
 activate: function (event, ui) {
 var scrollPos = $(window).scrollTop();
 window.location.hash = ui.newPanel.selector;
 $(window).scrollTop(scrollPos);
 }
 });
</code></pre>

blocks|key|1622132|text|这就是你想要的吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1622133|$("#tabs+>+ul").tabs({+
+++select:+function(event,+ui)+
+++{+
++++++window.location+=+"#"+%2B+ui.tab;
+++}
});|code-block|syntax|javascript|1622134|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Would this be what you're going for?

<pre><code>$("#tabs &gt; ul").tabs({ 
 select: function(event, ui) 
 { 
 window.location = "#" + ui.tab;
 }
});
</code></pre>

blocks|key|1622431|text|上面的许多答案不适用于当前版本的jQuery+UI选项卡。下面是我目前正在使用的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1622432|var+tabsUi+=+$('#tabs');
tabsUi.tabs();

//+Add+hash+to+URL+when+tabs+are+clicked
tabsUi.find('>+ul+a').click(function()+{
++++history.pushState(null,+null,+$(this).attr('href'));
});

//+Switch+to+correct+tab+when+URL+changes+(back/forward+browser+buttons)
$(window).bind('hashchange',+function()+{
++++if+(location.hash+!==+'')+{
++++++++var+tabNum+=+$('a[href='+%2B+location.hash+%2B+']').parent().index();
++++++++tabsUi.tabs('option',+'active',+tabNum);
++++}+else+{
++++++++tabsUi.tabs('option',+'active',+0);
++++}
});|code-block|syntax|javascript|1622433|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Many of the above answers don't work with the current version of jQuery UI Tabs. Here's what I'm currently using:

<pre><code>var tabsUi = $('#tabs');
tabsUi.tabs();

// Add hash to URL when tabs are clicked
tabsUi.find('&gt; ul a').click(function() {
 history.pushState(null, null, $(this).attr('href'));
});

// Switch to correct tab when URL changes (back/forward browser buttons)
$(window).bind('hashchange', function() {
 if (location.hash !== '') {
 var tabNum = $('a[href=' + location.hash + ']').parent().index();
 tabsUi.tabs('option', 'active', tabNum);
 } else {
 tabsUi.tabs('option', 'active', 0);
 }
});
</code></pre>

blocks|key|1407376|text|$('#tabs').tabs({
++++select:+function(event,+ui){
++++++window.location+=+ui.tab.href;
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1407377|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$('#tabs').tabs({
 select: function(event, ui){
 window.location = ui.tab.href;
 }
});
</code></pre>

blocks|key|1407656|text|jQuery+UI+1.10.3的我的方式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1407657|$("#tabs").tabs({
+++beforeActivate:+function(event,+ui)+{
++++++++var+hash+=+ui.newTab.children("li+a").attr("href");
++++++++window.location.hash+=+hash;
+++}
});|code-block|syntax|javascript|1407658|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

My way for jQuery UI 1.10.3

<pre><code>$("#tabs").tabs({
 beforeActivate: function(event, ui) {
 var hash = ui.newTab.children("li a").attr("href");
 window.location.hash = hash;
 }
});
</code></pre>

blocks|key|1407456|text|我使用的是一个标签插件，你可以在github：https://github.com/jquerytools/jquerytools.github.com上找到它。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1407457|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jquerytools/jquerytools.github.com^0|N|1H|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I'm using a tab plugin you can find it at github: <a href="https://github.com/jquerytools/jquerytools.github.com" rel="nofollow">https://github.com/jquerytools/jquerytools.github.com</a>

blocks|key|1622525|text|这对我使用Jquery+1.8很有效|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1622526|$('#tabs').tabs({
++++activate:+function(event,+ui)+{
+++++++window.location.hash+=+ui.newPanel.attr('id');
++++}
});|code-block|syntax|javascript|1622527|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This worked for me using Jquery 1.8

<pre><code>$('#tabs').tabs({
 activate: function(event, ui) {
 window.location.hash = ui.newPanel.attr('id');
 }
});
</code></pre>

blocks|key|1407936|text|在查看了其他一些问题和jQueryUI应用编程接口文档后，我发现这对我来说是可行的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1407937|$(document).ready(function()+{
++++$("#tabs").tabs({
++++++++activate:+function(+event,+ui+)+{
++++++++++++location.hash+=+ui.newTab.children(".ui-tabs-anchor").attr("href").substr(1);
++++++++}
++++});
});|code-block|syntax|javascript|1407938|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

After looking through some other questions and the jQueryUI API docs I found that this ended up working for me.

<pre><code>$(document).ready(function() {
 $("#tabs").tabs({
 activate: function( event, ui ) {
 location.hash = ui.newTab.children(".ui-tabs-anchor").attr("href").substr(1);
 }
 });
});
</code></pre>

blocks|key|1407411|text|看起来ui.tab本身并没有返回有效的字符串。(相反，它返回undefined，所以您可以说它根本不返回任何内容。)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1407412|尝试在ui.jquery.js的开发版本中查看是否有任何返回，也许您必须调用ui.tab的子级;-)|1407413|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

It seems like ui.tab itself doesn't return a valid string. (instead it returns undefined, so you'd say it doesn't return anything at all.) 

Try looking around in the dev version of ui.jquery.js whether there are any returns there, maybe you have to call a child of ui.tab ;-)

blocks|key|1407762|text|这段代码对我来说没问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1407763|$('#tabs').tabs({
++++select:+function(event,+ui)+{+
++++++++window.location+=+$(ui.tab).attr('href');
++++}
});|code-block|syntax|javascript|1407764|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This code works ok for me:

<pre><code>$('#tabs').tabs({
 select: function(event, ui) { 
 window.location = $(ui.tab).attr('href');
 }
});
</code></pre>

blocks|key|1407969|text|下面的代码适用于我：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1407970|$("#tabs").tabs({
++++activate:+function(event,+ui)+{+
+++++++window.location.hash=ui.newPanel.selector;+
++++}
});|code-block|syntax|javascript|1407971|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This code works for me :

<pre><code>$("#tabs").tabs({
 activate: function(event, ui) { 
 window.location.hash=ui.newPanel.selector; 
 }
});
</code></pre>

blocks|key|1622765|text|下面的代码适用于我。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1622766|$("#tabs").tabs({
+++activate+:+function(event,+ui)+{
+++++window.location.hash+=+ui.newPanel[0].id;
++}
});|code-block|syntax|javascript|1622767|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The following code is worked for me..

<pre><code>$("#tabs").tabs({
 activate : function(event, ui) {
 window.location.hash = ui.newPanel[0].id;
 }
});
</code></pre>

blocks|key|1408084|text|我的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1408085|jQuery+v3.5.1、jQuery+UI+v1.12.1|1408086|$(".detail-groups").tabs({+activate:+function(event,+ui)+{
++++++++++++++++++++++++++++window.location.hash+=+ui.newPanel[0].id;
+++++++++++++++++++++++++}
++++++++++++++++++++});|code-block|syntax|javascript|1408087|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

My working solution.

jQuery v3.5.1, jQuery UI v1.12.1

<pre><code>$(".detail-groups").tabs({ activate: function(event, ui) {
 window.location.hash = ui.newPanel[0].id;
 }
 });
</code></pre>

blocks|key|1407851|text|这段代码对我来说很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1407852|window.location.hash="";|code-block|syntax|javascript|1407853|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This piece of code worked for me:

<pre><code>window.location.hash="";
</code></pre>

I've been trying to find a way to change the window.location.hash to the currently selected tab in <a href="http://docs.jquery.com/UI/Tabs" rel="noreferrer" title="Jquery UI Tabs">Jquery UI Tabs</a>.

I've tried:

<pre><code>$("#tabs &gt; ul").tabs();
$("#tabs &gt; ul").bind("tabsshow", function(event, ui) { 
window.location.hash = ui.tab;
})
</code></pre>

This results in changing the hash to #undefined when the tab is changed.

I've also tried:

<pre><code>$("#tabs &gt; ul").tabs({ 
select: function(event, ui) { 
window.location.hash = ui.tab }
});
</code></pre>

But this doesn't seem to be triggered at all.

Any help would be appreciated. Thanks.

Edit: It looks like part of my initial problem had something to do with js somewhere else interfering with this. Both the accepted answer and the other suggested answer slightly modified do work. Thanks all.

changing location.hash with jquery ui tabs

jQuery

我一直在尝试找到一种方法，在中将window.location.hash更改为当前选定的选项卡。我试过了：$("#tabs > ul").tabs();$("#tabs > ul").bind("tabsshow", function(event, ui) { window.location.hash = ui.tab;})这会导致在更改选项卡时将散列更改为#undefined。我也尝试过：$("

问使用jquery ui选项卡更改location.hash
EN

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jquery ui选项卡更改location.hashEN

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jquery ui选项卡更改location.hash
EN