我在menu.php中制作了一个基于Accordion的菜单。
让我们说
的 menu.php
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Test</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul class="nav">
<li class="active"><a href="/test/index.php">Take Test</a></li>
<li><a href="/test/report.php">My Best Report</a></li>
<li><a href="/test/repository.php">My Test</a></li>
<li><a href="/test/about.php">About Test</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Training</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<ul class="nav">
<li><a href="/training/">Recommended Training</a></li>
<li><a href="/training/purchased.php">Purchased Training</a></li>
<li><a href="/training/other.php">Other Training</a></li>
<li><a href="/training/about.php">About Training</a></li>
</ul>
</div>
</div>
</div>
在其他每一页上我都使用include("menu.php");
调用menu.php
现在我希望手风琴在链接打开时自动在下一页打开。我应该如何跟踪打开的链接并激活该手风琴选项卡?
答案 0 :(得分:1)
当路径名对应链接时,您可以尝试使用一些jQuery将类添加到li
及其父级:
$(document).ready(function() {
var pathname = window.location.pathname; // Returns only path of URI
var href_value;
// Here, I force the pathname to be able to simulate
// You won't need it in your application, but maybe some formatting
pathname = "/training/purchased.php";
// Loop for each li
$(".nav li").each(function() {
href_value = $(this).children("a").attr("href");
// when "pathname" equals the href of the link
if (pathname == href_value) {
// Add "active" to li and "collapsed" to the menu
$(this).addClass("active");
$(this).closest(".collapse").addClass("collapsed");
}
})
});
.active a {
color: red;
}
.collapse {
display: none;
}
.collapsed {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Test</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul class="nav">
<li><a href="/test/index.php">Take Test</a></li>
<li><a href="/test/report.php">My Best Report</a></li>
<li><a href="/test/repository.php">My Test</a></li>
<li><a href="/test/about.php">About Test</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Training</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<ul class="nav">
<li><a href="/training/">Recommended Training</a></li>
<li><a href="/training/purchased.php">Purchased Training</a></li>
<li><a href="/training/other.php">Other Training</a></li>
<li><a href="/training/about.php">About Training</a></li>
</ul>
</div>
</div>
</div>
很难在带有网址的代码段上进行模拟...