PHP + 代码点火器 : Bootstrap nav-link active for sub directory

Question

这里是 Bootstrap 的新手。我已经尝试了几个小时了。也许我缺少一些简单的东西。

基本上，我试图在子目录中浏览时保持导航链接处于事件状态。

当我点击“帐户”(site.com/accounts) 时，它正确地将 nav-link 标记为 active。

Accounts 是一个帐户列表。

当我单击列表中的其中一个帐户时，我们应该转到该帐户 (site.com/accounts/0000734174)，但侧边栏中的帐户导航链接不再处于事件状态。

如何在保持 href“/accounts”的同时保持它处于事件状态，因为在我看来它应该是。有成千上万的帐户，我们不希望每个帐户都有一个下拉子导航链接。

我是不是理解错了？请帮忙。 谢谢

编辑: 让我补充一下，这是通过代码点火器路由的:

$route[ 'accounts/(:num)' ] = "accounts_details";
$route[ 'accounts' ] = "accounts_list";

然后让我添加我尝试过的内容。在 SO 上找到不同的 Jquery 片段，不同的 CSS 失败，不同的路由想法。 这也是在使用 CodeIgniter 框架的 CoreUI 模板中。

更多详情: HTML-

<div class="sidebar">
    <nav class="sidebar-nav">
        <ul class="nav">
            <li class="nav-title">Navigation</li>
            <li class="nav-item">
                <a class="nav-link" href="<?php echo base_url(); ?>accounts">
                <i class="nav-icon icon-folder-alt"></i> Accounts</a>
            </li>
        </ul>
    </nav>
</div>

CSS-

.sidebar .nav-link.active {
  color: #fff;
  background: #3a4248;
}

Answer 1

更新1

是的，你走错了路。这绝对不是 Bootstrap 问题。

但是您关于使用一个 Controller 而不是两个 Controller 的评论是一个很好的答案。如果它有效，那很好。但是，我们不知道 CodeIgniter 如何将导航链接设置为事件状态，所以我认为这是了解 CodeIgniter 和模型- View - Controller 架构的好机会。

我不了解 CodeIgniter，但查看他们的文档，我猜你是 including the sidebar as a partial 。

在您的 View 页面(可能是 application/views/accounts_details 和 application/views/accounts_list )或您的 Controller 中，您必须对 sidebar View 进行某种调用。

您要做的是在您的 Controller 和 make that available to your views 中设置一个 PHP 变量:

$data = array('active' => 'active');
$this->load->view('main_view', $data);

然后在您的边栏代码中，检查该变量。

<div class="sidebar">
    <nav class="sidebar-nav">
        <ul class="nav">
            <li class="nav-title">Navigation</li>
            <li class="nav-item">
                <a class="nav-link <?php echo $active; ?>" href="<?php echo base_url(); ?>accounts">
                <i class="nav-icon icon-folder-alt"></i> Accounts</a>
            </li>
        </ul>
    </nav>
</div>

我不了解 CodeIgniter，但我认为是 this tutorial will help。

原帖

这不是 Bootstrap 问题。

Bootstrap 正在为任何具有适当类或 DOM 结构的东西设置样式:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a> <---- the 'active' class makes it pretty
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

但是，作为 Bootstrap even points out ，它们不以任何特殊方式处理 .active 的样式:

"The base .nav component does not include any .active state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling."

无论您使用何种语言编写此代码，您都需要确保在路由包含“/accounts”时将正确的类添加到正确的元素。

这可以在 Javascript 中完成，使用 window.location 判断 URL 是否包含“/accounts/”，然后使用 .addClass() 将类 active 添加到该标记。

但是，如果您使用的是 Angular、React、Vue 等，则可能有更好的方法在该语言框架内执行此操作。

但是，在没有看到您的 HTML 的情况下，我只是猜测 CoreUI 在类上使用 .active 以这种方式设置您的代码样式。

用更多代码(HTML、CSS、JS)和语言更新您的问题，我很乐意在此处添加一些细节。