从另一页打开引导选项卡（在手风琴内）

Question

I have a list of tabs that is situated inside an accordion and I would like to open a specific tab from a link that is on another page. 我有一个位于手风琴内的选项卡列表，我想从另一页上的链接中打开特定的选项卡。 I have found a piece of javascript that allows me top open a specific accordion panel from another page, which is: 我发现了一段JavaScript，可以让我从另一个页面顶部打开特定的手风琴面板，这是：

$(document).ready(function () {
  location.hash && $(location.hash + '.collapse').collapse('show');
});

but this obviously won't work for a list of tabs inside the accordion. 但这显然不适用于手风琴中的选项卡列表。

here is one of the links on the action page.. 这是操作页面上的链接之一。

<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>

Here is some of the html on the page that opens in the new browser window: ( I have removed most of the list and accordion items the reduce this sample) 这是在新的浏览器窗口中打开的页面上的一些html ：（我删除了大多数列表和手风琴项目，以减少此示例）

<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>

so I would like to open the tab pane #pri-process which is inside #private-body accordion panel. 所以我想打开＃private-body手风琴面板中的标签窗格＃pri-process。 And I would like to do this from another page on the web-site. 我想从网站上的另一个页面执行此操作。

Can anyone help please? 有人可以帮忙吗？

Answer 1

The reason that works is because it is using the ID as a parameter. 起作用的原因是因为它使用ID作为参数。 Now you need to pass 2 parameters to the next page, it might be better to use url parameters. 现在您需要将2个参数传递到下一页，使用url参数可能会更好。 The first parameter needs to be the id of the accordian panel, and the second parameter needs to be the id of the link to the tab you want to open. 第一个参数必须是Accordian面板的ID，第二个参数必须是指向要打开的选项卡的链接的ID。 This means you will need to add IDs to your tab links. 这意味着您需要将ID添加到标签链接。 I have made a bootply for you to show what it should look like. 我为您做了个介绍，以说明它的外观。 I have hard coded the variables in the javascript section, as I was unsure if you can use variables like that in bootply, so use the javascript in this answer, not the link. 我已经在javascript部分中对变量进行了硬编码，因为我不确定是否可以在bootply中使用类似的变量，因此请在此答案中使用javascript，而不是链接。

Anyway, your tab links need ids like so 无论如何，您的标签链接需要这样的ID

<li><a href="#pri-faq" id="faq-link" data-toggle="tab">Frequently Asked Qustions</a></li>

Here is the javascript 这是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');
});

As a side note, you do not need to use window.open, you can instead use a normal anchor and change the target to _blank like in the following link. 附带说明，您无需使用window.open，而可以使用普通锚将目标更改为_blank如以下链接所示。 The link to open the popup should look something like this: 打开弹出窗口的链接应如下所示：

<a href="page.html?acc=private-body&tab=faq-link" target="_blank">Link</a>

从另一页打开引导选项卡（在手风琴内）

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-07-21 13:10:51

从另一页打开引导选项卡（在手风琴内）

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-07-21 13:10:51

解决方案1
0 已采纳 2014-07-21 13:10:51