Question

我想要做的是将Navbar存储在名为index.php的文件中。这是显示的主页面。当用户单击导航栏中的选项卡时，在正文部分中，另一个php显示，并且选项卡变为活动状态。当用户点击其他标签时，＆＃34;活动＆＃34;应该切换位置。我在显示php和切换活动类时遇到了麻烦。任何帮助？

我能做的事情：

导航条代码上方有一个script，它描述了.php文件的路径，并告诉它显示它所在的位置。

代码：

    <script type="text/javascript">
function homeshow() {
    $.get("index.php");
    return false;
}
function aboutshow() {
    $.get("about.php");
    return false;
}
</script>

Navbar的一个链接或导航按钮应该允许Javascript / jQuery代码显示在正文中的<p></p>标记之间。我试过这个：

<nav class="navbar navbar-default">
   <div class="container-fluid">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#" class onclick="homeshow();">Home</li>
      <li><a href="#" class onclick="aboutshow();">About</li>
</ul>

Answer 1

如果您尝试在标准点击事件中检查有效标签，那么active类将不会被添加到最近选择的标签中，直到事件发生后。

订阅引导程序show.bs.tab。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

有关详细信息，请参阅here。

Answer 2

您可以使用jQuery或javascript代码将活动状态从之前的li更改为您单击的活动状态。

jQuery示例：

$('ul.navbar-nav a').on('click', function () {
  $('ul.navbar-nav li').removeClass('active');
  $(this).closest('li').addClass('active');
})

Bootstrap - 显示PHP文件并切换活动类

2 个答案: