JQuery选项卡和超链接（请帮我修复我的代码） [英] JQuery Tabs and Hyperlinking (help me fix my code, please)
问题描述
我使用多个页面，每个页面都有jQuery选项卡。可以说我有Page1.html＃tab1和＃tab2和Page2.html＃tab3和#tab4。我的代码存在以下问题：
1）在标签内容中，Page1.html＃tab2有超链接到Page1.html＃tab1。该链接不起作用 - 点击该链接时该页面仅保留在＃tab1上。但是，Page1到#tab1上的菜单容器中的超链接确实有效。这两个超链接都使用相同的href =＃tab1，但无论出于何种原因，链接到Page1.html＃tab1时，只有Page1.html＃tab2内容以外的链接有效。 2）如果我向某人发送超链接到www.Page1.html＃tab2，则页面URL显示为www.Page1。标签1显示HTML，这意味着我不能直接链接到选项卡。但是，网站上的菜单没有正确链接到选项卡。如果在浏览Page1.html时单击Page2.html＃tab3的菜单链接，该选项卡将正确加载，并且URL显示Page2.html＃tab3，并且即使单击页面上的＃tab4也会保持这种状态。当点击菜单超链接到不同的页面时，URL只会改变，即Page1.html＃tab1到Page2.html＃tab3。在Page2.html＃tab4时点击Page2.html＃tab3，标签内容将正确更改为＃tab3，但网址将保持为Page2.html＃tab4。
$ b C ** EXTRA CREDIT ** ：当我直接点击标签时，标签图片弹出和先前选择的选项卡展开。当我点击菜单超链接到选项卡时，即使显示新选择的选项卡的内容正确，上一个选项卡仍会弹出。或者，如果使用菜单链接访问新页面上的选项卡，则没有选项卡会弹出，但会显示正确的选项卡内容。我认为解决上述问题也会解决这个问题。
这是我的代码：
< script type =text / javascript>
$（document）.ready（function（）{
var tabId = location.hash;
if（tabId）{
$（tabId）.show（）;
$（function（）{
$（'a [href ^ =＃]'）。click（function（e）{
e.preventDefault（）;
$（'html，body'）。scrollTop（$（this.hash）.offset（）。top - 50）;
}）;
}）;
}） ;
< / script>
< script type =text / javascript>
$（document）.ready（function（）{
var tabContents = $（。tab_content）。hide（），
tabs = $（ul.tabs li，.rgtPanelBox （li））; //第二个匹配左边栏的选择器
var tabId = location.hash;
if（tabId）{
$（tabId）.show（）;
}
else {
tabs.first（）。addClass（active）。show（）;
tabContents.first（）。show（）;
}
tab.click（function（）{
var $ this = $（this），
activeTab = $ this.find（'a'）。attr（'href'）;
if（！$ this.hasClass（'active'）&& activeTab.length> 1&&& activeTab.indexOf（'＃'）=== 0）{
$ this .addClass（'active'）。siblings（）。removeClass（'active'）;
tabContents.hide（）.filter（activeTab）.fadeIn（）;
}
return;
}）;
}）;
< / script>
无论如何，我是一个巨大的noob，所以您提供的代码越好，我越容易批准你的答案是正确的。 ：）
感谢！
标记可哈希，也就是说，使它们对于前端用户是可收藏的。你似乎正在创建自己的标签插件，但jQuery UI将为你做哈希部分。这里有一个演示设置，如你所提到的：
http://muledesign.com/2009/05/bookmarkable-tabs-with-jquery-ui/
DEMO：
以下是演示页面 - > http://muledesign.com/demo/tabs/default-tabs.html
演示页哈希链接到标签 - > http://muledesign.com/demo/tabs/default -tabs.html＃movie
Re：点C） - 尝试使用lightbox插件并将lightbox插件open / init函数附加到激活UI选项卡上的事件 - > http://api.jqueryui.com/tabs /＃event-activate
感谢您不想使用插件，但你已经在使用jquery了。>
I am using multiple pages that each have jQuery tabs. Lets say I have Page1.html with #tab1 and #tab2 and Page2.html with #tab3 and #tab4. My code has issues with:
1) Within the tab content, Page1.html#tab2 has a hyperlink to Page1.html#tab1. The link does not work - the page just stays on #tab1 when clicking the link. However, a hyperlink in the menu container on Page1 to #tab1 does work. Both hyperlinks use the same a href="#tab1" but for whatever reason, only the link outside of the Page1.html#tab2 content works when linking to Page1.html#tab1. The hyperlinks in the menu container always work.
2) If I send someone a hyperlink to www.Page1.html#tab2, the page URL shows as www.Page1.html with tab 1 showing, meaning I cannot link directly to a tab. However, the menu on the website does correctly link to tabs. If I click the menu link for Page2.html#tab3 while browsing Page1.html, the tab will correctly load and the URL shows Page2.html#tab3 and will remain that way even if I click #tab4 on the page. The URL ONLY changes when clicking menu hyperlinks to different pages, i.e. Page1.html#tab1 to Page2.html#tab3. Clicking Page2.html#tab3 while on Page2.html#tab4, the tab content will correctly change to #tab3 but the URL will remain as Page2.html#tab4.
What I Want:
A) To be able to send someone a link directly to a tab. Sending someone a link to www.Page1.html#tab2 will always load as the URL www.Page1.html with the first tab displaying. However, the menu hyperlinks on the page do work.
B) To be able to link between tabs on the same page if the link is within the tab content. For example, a link in the content of Page1.html#tab1 should be able to link to Page1.html#tab2. Right now, it only works if the link in the content of Page1.html#tab1 is linking to a tab on a separate page like Page2.html#tab3.
C) **EXTRA CREDIT**: When I click directly on a tab, the tab image "pops" out and the previously selected tab "unpops". When I click a menu hyperlink to a tab, the previous tab remains popped out even with the correct content for the newly selected tab showing. Or, if using a menu link to travel to a tab on a new page, no tabs "pop" out but the correct tab content shows. I think fixing the above problems will solve this problem, too.
Here is my code:
<script type="text/javascript">
$(document).ready(function() {
var tabId = location.hash;
if(tabId) {
$(tabId).show();
}
$(function () {
$('a[href^="#"]').click(function(e){
e.preventDefault();
$('html,body').scrollTop($(this.hash).offset().top - 50);
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var tabContents = $(".tab_content").hide(),
tabs = $("ul.tabs li, .rgtPanelBox ul li"); // Second selector to match left hand sidebar
var tabId = location.hash;
if(tabId) {
$(tabId).show();
}
else {
tabs.first().addClass("active").show();
tabContents.first().show();
}
tabs.click(function() {
var $this = $(this),
activeTab = $this.find('a').attr('href');
if(!$this.hasClass('active') && activeTab.length > 1 && activeTab.indexOf('#') === 0){
$this.addClass('active').siblings().removeClass('active');
tabContents.hide().filter(activeTab).fadeIn();
}
return;
});
});
</script>
Anyways, I'm a huge noob so the better the code you provide, the easier I can approve your answer as being correct. :)
Thanks!
You need to make your anchor tags hashable, that is, make them 'bookmarkable' for the front-end user. You seem to be on the way to creating your own tab plugin, but jQuery UI will do the hashing part for you. Here is a demonstration setting tabs up as you have mentioned:
http://muledesign.com/2009/05/bookmarkable-tabs-with-jquery-ui/
DEMO:
Here's the demo page -> http://muledesign.com/demo/tabs/default-tabs.html
Demo page with hashable link to tab -> http://muledesign.com/demo/tabs/default-tabs.html#movie
Re: point C) - Try using a lightbox plugin and attaching the lightbox plugins open/init function to the activate event on UI tabs -> http://api.jqueryui.com/tabs/#event-activate
I appreciate you may not want to use plugins, but you're already using jquery so meh.
这篇关于JQuery选项卡和超链接（请帮我修复我的代码）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
