链接到手风琴中的另一个选项卡，嵌入的链接将不起作用
Link to another tab within accordion, embedded links will not work
我在选项卡中有一个手风琴，我想在手风琴中创建一个链接，以链接到另一个选项卡中的另一个手风琴。
这是我迄今为止的代码：
$(function() {
$(document).ready(function(){
var getHash = function(key){
var parts = window.location.hash.substr(1).split(/'|/);
var _key = parseInt(key) || 0;
return _key < parts.length ? parts[_key] : false;
};
var setHash = function(key, value){
var parts = window.location.hash.substr(1).split(/'|/);
var _key = parseInt(key) || 0;
parts[_key] = value
window.location.hash = '#' + parts.join('|');
};
$(".accordion").accordion({
heightStyle: "content",
collapsible: true,
animated: 'slide',
navigation: true,
activate: function(event, ui) {
if(ui.newHeader.length > 0){
// A new accordion panel is open
setHash(1, ui.newHeader.parent().children('h3').index(ui.newHeader));
}else{
// In case accordion panel is closed
setHash(1, '');
}
},
active: false
});
$( "#tabs" ).tabs({
collapsible: true,
activate: function(event, ui) {
if(ui.newTab.length > 0){
// A new tab is open
var tabHash = ui.newTab.parent().children().index(ui.newTab);
if(tabHash == getHash(0)){
// In case current tab is the one in Hash, we open wanted accordion panel
// Make sure to parseInt hash value, because jquery-ui require an integer
ui.newPanel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
}else{
setHash(1,'');
}
setHash(0, tabHash);
}else{
// In case we close tab, hash is cleared
window.location.hash = ''
}
},
create: function(event, ui){
if(ui.tab.length > 0){
var tabHash = ui.tab.parent().children().index(ui.tab);
if(tabHash == getHash(0)){
// In case current tab is the one in Hash, we open wanted accordion panel
// Make sure to parseInt hash value, because jquery-ui require an integer
ui.panel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
}else{
setHash(1,'');
}
setHash(0, tabHash);
}
},
// Make sure to parseInt hash value, because jquery-ui require an integer
// Remove the " || 0 " if you want all to be closed
active: parseInt(getHash(0)) || 0
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<div id="tabs">
<ul>
<li><a href="#tab1">tab1</a></li>
<li><a href="#tab2">tab2</a></li>
<li><a href="#tab3">tab3</a></li>
</ul>
<div id="tab1">
<h2>Tab1 Header</h2>
<div class="accordion">
<h3>Tab1 Accordion 1</h3>
<div>
<p><a href="#tab2">This should take you to tab2</a></p>
</div>
<h3>Tab1 Accordion 2</h3>
<div>
<p>Tab1 Accordion 2 Content</p>
</div>
</div>
</div>
<div id="tab2">
<h2>Tab2 Header</h2>
<div class="accordion">
<h3>Tab2 Accordion 1</h3>
<div>
<p>Tab2 Accordion 1 Content</p>
</div>
<h3>Tab2 Accordion 2</h3>
<div>
<p>Tab2 Accordion 2 Content</p>
</div>
</div>
</div>
<div id="tab3">
<h2>Tab3 Header</h2>
<div class="accordion">
<h3>Tab3 Accordion 1</h3>
<div>
<p>Tab3 Accordion 1 Content</p>
</div>
<h3>Tab3 Accordion 2</h3>
<div>
<p>Tab3 Accordion 2 Content</p>
</div>
</div>
</div>
</div>感谢代码源为哈希函数提供代码
所以，如果你看标签1，手风琴1，你可以看到我已经创建了一个链接，应该把你带到标签2，但它不起作用，只有当我在地址栏中输入它时，这个链接才起作用。知道为什么以及如何修复吗？
编辑：很抱歉，我在最初的帖子中没有明确说明这一点，我基本上希望能够使用该哈希链接到另一个选项卡或另一个标签中的另一个手风琴
感谢
要在其他选项卡中打开手风琴，首先使用自定义数据属性来指定要打开的手风琴的索引，在下面的示例中使用data-accordion-target。
HTML
<div id="tabs">
<ul>
<li><a href="#tab1">tab1</a></li>
<li><a href="#tab2">tab2</a></li>
<li><a href="#tab3">tab3</a></li>
</ul>
<div id="tab1">
<h2>Tab1 Header</h2>
<div class="accordion">
<h3>Tab1 Accordion 1</h3>
<div>
<p><a href="#tab2" data-accordion-target="0">This should take you to tab2 accordion 1</a></p>
</div>
<h3>Tab1 Accordion 2</h3>
<div>
<p><a href="#tab3" data-accordion-target="1">This should take you to tab3 accordion 2</a></p>
</div>
</div>
</div>
<div id="tab2">
<h2>Tab2 Header</h2>
<div class="accordion">
<h3>Tab2 Accordion 1</h3>
<div>
<p><a href="#tab1" data-accordion-target="0">This should take you to tab1 accordion 1</a></p>
</div>
<h3>Tab2 Accordion 2</h3>
<div>
<p><a href="#tab3" data-accordion-target="0">This should take you to tab3 accordion 1</a></p>
</div>
</div>
</div>
<div id="tab3">
<h2>Tab3 Header</h2>
<div class="accordion">
<h3>Tab3 Accordion 1</h3>
<div>
<p><a href="#tab1" data-accordion-target="1">This should take you to tab1 accordion 2</a></p>
</div>
<h3>Tab3 Accordion 2</h3>
<div>
<p><a href="#tab2" data-accordion-target="1">This should take you to tab2 accordion 2</a></p>
</div>
</div>
</div>
</div>
使用jQuery trigger导航到所需的选项卡，并重新加载该选项卡的手风琴，同时设置哪个手风琴选项将处于活动状态。
在下面的示例中，代码中添加的内容是用于选项卡accordions 中的一组内部链接
$(function() {
$(document).ready(function(){
var getHash = function(key){
var parts = window.location.hash.substr(1).split(/'|/);
var _key = parseInt(key) || 0;
return _key < parts.length ? parts[_key] : false;
};
var setHash = function(key, value){
var parts = window.location.hash.substr(1).split(/'|/);
var _key = parseInt(key) || 0;
parts[_key] = value;
window.location.hash = '#' + parts.join('|');
};
$(".accordion").accordion({
heightStyle: "content",
collapsible: true,
animated: 'slide',
navigation: true,
activate: function(event, ui) {
if(ui.newHeader.length > 0){
// A new accordion panel is open
setHash(1, ui.newHeader.parent().children('h3').index(ui.newHeader));
}else{
// In case accordion panel is closed
setHash(1, '');
}
},
active: false
});
$( "#tabs" ).tabs({
collapsible: true,
activate: function(event, ui) {
if(ui.newTab.length > 0){
// A new tab is open
var tabHash = ui.newTab.parent().children().index(ui.newTab);
if(tabHash == getHash(0)){
// In case current tab is the one in Hash, we open wanted accordion panel
// Make sure to parseInt hash value, because jquery-ui require an integer
ui.newPanel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
}else{
setHash(1,'');
}
setHash(0, tabHash);
}else{
// In case we close tab, hash is cleared
window.location.hash = '';
}
},
create: function(event, ui){
if(ui.tab.length > 0){
var tabHash = ui.tab.parent().children().index(ui.tab);
if(tabHash == getHash(0)){
// In case current tab is the one in Hash, we open wanted accordion panel
// Make sure to parseInt hash value, because jquery-ui require an integer
ui.panel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
}else{
setHash(1,'');
}
setHash(0, tabHash);
}
},
// Make sure to parseInt hash value, because jquery-ui require an integer
// Remove the " || 0 " if you want all to be closed
active: parseInt(getHash(0)) || 0
});
});
////////////////////////Addition to your code/////////////////////
var internalLinks = $(".accordion").find("a");
$.each(internalLinks,function(i,v){
$(v).on('click',function(e){
var h3Index = parseInt($(v).attr("data-accordion-target"));
e.preventDefault();
var id = $(v).prop("href").split("#")[1];
$("li").find("a[href=#"+id+"]").trigger("click");
//$($( "#"+id).find("h3")[h3Index]).trigger("click");
$( "#"+$(v).prop("href").split("#")[1]).find(".accordion").accordion('option','active', h3Index);
});
});
/////////////////////////////////////////////////////////////////////
});
http://jsbin.com/qebocevete/edit?html，js，输出
只需使用.trigger('click')事件即可转到tab2，如下所示：
$('#gotoTab2').click(function(){
$(".ui-state-default a[href='#tab2']").trigger('click');
});
gotoTab2：应该将您带到tab2的<a>标记的id。
<a id="gotoTab2" href="#tab2">This should take you to tab2</a>
请参阅：Working Fiddle
工作代码段：
$(function() {
$('#gotoTab2').click(function(){
$(".ui-state-default a[href='#tab2']").trigger('click');
});
$(document).ready(function(){
var getHash = function(key){
var parts = window.location.hash.substr(1).split(/'|/);
var _key = parseInt(key) || 0;
return _key < parts.length ? parts[_key] : false;
};
var setHash = function(key, value){
var parts = window.location.hash.substr(1).split(/'|/);
var _key = parseInt(key) || 0;
parts[_key] = value
window.location.hash = '#' + parts.join('|');
};
$(".accordion").accordion({
heightStyle: "content",
collapsible: true,
animated: 'slide',
navigation: true,
activate: function(event, ui) {
if(ui.newHeader.length > 0){
// A new accordion panel is open
setHash(1, ui.newHeader.parent().children('h3').index(ui.newHeader));
}else{
// In case accordion panel is closed
setHash(1, '');
}
},
active: false
});
$( "#tabs" ).tabs({
collapsible: true,
activate: function(event, ui) {
if(ui.newTab.length > 0){
// A new tab is open
var tabHash = ui.newTab.parent().children().index(ui.newTab);
if(tabHash == getHash(0)){
// In case current tab is the one in Hash, we open wanted accordion panel
// Make sure to parseInt hash value, because jquery-ui require an integer
ui.newPanel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
}else{
setHash(1,'');
}
setHash(0, tabHash);
}else{
// In case we close tab, hash is cleared
window.location.hash = ''
}
},
create: function(event, ui){
if(ui.tab.length > 0){
var tabHash = ui.tab.parent().children().index(ui.tab);
if(tabHash == getHash(0)){
// In case current tab is the one in Hash, we open wanted accordion panel
// Make sure to parseInt hash value, because jquery-ui require an integer
ui.panel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
}else{
setHash(1,'');
}
setHash(0, tabHash);
}
},
// Make sure to parseInt hash value, because jquery-ui require an integer
// Remove the " || 0 " if you want all to be closed
active: parseInt(getHash(0)) || 0
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<div id="tabs">
<ul>
<li><a href="#tab1">tab1</a></li>
<li><a href="#tab2">tab2</a></li>
<li><a href="#tab3">tab3</a></li>
</ul>
<div id="tab1">
<h2>Tab1 Header</h2>
<div class="accordion">
<h3>Tab1 Accordion 1</h3>
<div>
<p><a id="gotoTab2" href="#tab2">This should take you to tab2</a></p>
</div>
<h3>Tab1 Accordion 2</h3>
<div>
<p>Tab1 Accordion 2 Content</p>
</div>
</div>
</div>
<div id="tab2">
<h2>Tab2 Header</h2>
<div class="accordion">
<h3>Tab2 Accordion 1</h3>
<div>
<p>Tab2 Accordion 1 Content</p>
</div>
<h3>Tab2 Accordion 2</h3>
<div>
<p>Tab2 Accordion 2 Content</p>
</div>
</div>
</div>
<div id="tab3">
<h2>Tab3 Header</h2>
<div class="accordion">
<h3>Tab3 Accordion 1</h3>
<div>
<p>Tab3 Accordion 1 Content</p>
</div>
<h3>Tab3 Accordion 2</h3>
<div>
<p>Tab3 Accordion 2 Content</p>
</div>
</div>
</div>
</div>这是我的解决方案，用click（）触发选项卡上的点击；
$("#tabs > ul li a").each(function(){
var tab = $(this);
$("#tabs > div a[href="+tab.attr("href")+"]").on("click", function(e) {
e.preventDefault();
tab.click();
});
});
相关文章：
- 我的下拉菜单中的链接不起作用
- Ajax:Ajax响应中的链接不起作用
- jQuery Mobile到其他页面的锚链接不起作用
- 外部JavaScript链接不起作用
- 为什么我的动态更改链接不起作用?(Javascript）
- DOM事件链接不起作用
- javascript中最大字符数的链接不起作用
- jQuery高亮显示滚动导航链接不起作用
- 鼠标悬停导航链接不起作用
- 单击下拉菜单中的链接不起作用
- jQuery 链接不起作用
- 使用javascript的方法链接不起作用
- 具有另一个背景图像的图像上的链接不起作用
- AJAX 请求类似的链接不起作用
- 移动设备上的网站超链接不起作用
- JavaScript链接不起作用
- 谷歌地图自定义标记链接不起作用
- 铬错误或编码错误?目标页面中的锚/ID 链接不起作用
- 模式对话框内的链接不起作用
- IE javascript 书签let PDF 链接不起作用
