我有一个位于 Accordion 内部的选项卡列表，我想从另一页上的链接打开特定选项卡。我找到了一段 javascript，它允许我从另一个页面顶部打开一个特定的 Accordion 面板，它是:
$(document).ready(function () {
location.hash && $(location.hash + '.collapse').collapse('show');
});
但这显然不适用于 Accordion 内部的选项卡列表。
这是操作页面上的链接之一..
<li><a href="#" onClick="window.open('information.php?acc=private-body&tab=pri-faq' , 'faq-window' , 'width=980,height=600,top=100, left=500,toolbar=no')">Frequently Asked Questions</a></li>
这是在新浏览器窗口中打开的页面上的一些 html:(我删除了大部分列表和 Accordion 元素以减少此示例)
<head>
<script>
function getUrlParameter(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
$(document).ready(function() {
var accordian = getUrlParameter("acc");
var tab = getUrlParameter("tab");
$('#' + accordian + '.collapse').collapse('show');
$('#' + accordian + ' #' + tab).tab('show');
});
</script>
</head>
<body>
<div class="accordion" id="private">
<div class="private accordion-group accordion-caret">
<div class="main accordion-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#private" href="#private-body">Information for private residential properties</a> </div>
<div id="private-body" class="accordion-body collapse">
<div class="accordion-inner">
<ul class="nav nav-tabs">
<li class="active"><a href="#pri-process" data-toggle="tab">The Right to Manage process</a></li>
<li><a href="#pri-faq" data-toggle="tab">Frequently Asked Qustions</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="pri-process">
<div class="row-fluid">
<div class="span6">
<ol>
<li>.... </li>
</ol>
</div><!-- END SPAN6_01-->
<div class="span6">
<ol start="7">
<li>.... </li>
</ol>
</div><!-- END SPAN6_02-->
</div><!-- END ROW FLUID -->
</div><!-- END TAB PANE -->
<div class="tab-pane" id="pri-faq">
<div class="accordion" id="pri-faq-accordion">
<div class="accordion-group accordion-caret">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#pri-faq- accordion" href="#pri-Qone">1. What is the Right to Manage?</a>
</div>
<div id="pri-Qone" class="accordion-body collapse">
<div class="accordion-inner">
<p>.... </p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#pri-Qtwo">2. What is the purpose of Right to Manage?</a>
</div>
<div id="pri-Qtwo" class="accordion-body collapse">
<div class="accordion-inner">
<p>.... </p>
</div>
</div>
</div>
</div><!-- END PRI-FAQ ACCORDION -->
</div><!-- END TAB PANE -->
</div><!-- END TAB CONTENT -->
</div><!-- END ACCORDION INNER -->
</div><!-- END ACCORDION GROUP -->
</div>
</div><!-- END PRIVATE INFO ACCORDION -->
</body>
所以我想打开#private-body Accordion 面板内的选项卡 Pane #pri-process。我想从网站上的另一个页面执行此操作。
有人可以帮忙吗？
最佳答案
之所以可行，是因为它使用 ID 作为参数。现在你需要传递 2 个参数到下一个页面，使用 url 参数可能会更好。第一个参数需要是 Accordion 面板的 id，第二个参数需要是要打开的选项卡的链接的 id。这意味着您需要将 ID 添加到选项卡链接。我已经为您制作了一个 bootply 来展示它应该是什么样子。我在 javascript 部分对变量进行了硬编码，因为我不确定您是否可以在 bootply 中使用这样的变量，因此请在此答案中使用 javascript，而不是链接。
无论如何，您的标签链接需要像这样的 ID
<li><a href="#pri-faq" id="faq-link" data-toggle="tab">Frequently Asked Qustions</a></li>
这是javascript
function getUrlParameter(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
$document.ready(function() {
var accordian = getUrlParameter("acc");
var tab = getUrlParameter("tab");
$('#' + accordian + '.collapse').collapse('show');
$('#' + accordian + ' #' + tab).tab('show');
});
作为旁注，您不需要使用 window.open，您可以使用普通 anchor 并将目标更改为 _blank，如以下链接所示。打开弹出窗口的链接应如下所示:
<a href="page.html?acc=private-body&tab=faq-link" target="_blank">Link</a>
关于javascript - 从另一个页面打开 Bootstrap 选项卡(在 Accordion 中)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24865650/