Question

我有一个位于手风琴内的标签列表，我想从另一个页面上的链接打开一个特定的标签。我找到了一段javascript，允许我从另一个页面打开一个特定的手风琴面板，这是：

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

但这显然不适用于手风琴内的标签列表。

这是行动页面上的一个链接..

<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 :(我删除了大部分列表和手风琴项目，以减少此示例）

<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 panel里面的标签窗格#pri-process。我想从网站上的另一个页面进行此操作。

有人可以帮忙吗？

Answer 1

有效的原因是因为它使用ID作为参数。现在您需要将2个参数传递给下一页，使用url参数可能更好。第一个参数需要是accordian面板的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，您可以改为使用普通锚点并将目标更改为_blank，如下面的链接所示。打开弹出窗口的链接应如下所示：

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

从另一个页面打开一个bootstrap选项卡（在手风琴中）

1 个答案: