PHP + CodeIgniter：子目录的引导导航链接活动

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 sn-ps，不同的 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 问题。

然而您关于使用一个控制器而不是两个控制器的评论是一个很好的答案。如果它有效，那就太好了。但是，我们不知道 CodeIgniter 是如何将导航链接设置为活动的，所以我认为这是了解 CodeIgniter 和模型-视图-控制器架构的好机会。

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

在您的视图页面（可能是application/views/accounts_details 和application/views/accounts_list）或您的控制器中，您必须对sidebar 视图进行某种调用。

你想要做的是在你的控制器中设置一个 PHP 变量和make that available to your views:

$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 为任何具有适当类或 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 的样式：

“基础.nav 组件不包含任何.active 状态。以下示例包含该类，主要是为了说明该特定类不会触发任何特殊样式。”

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

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

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

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

用更多代码（HTML、CSS、JS）和语言更新您的问题，我很乐意在这里添加一些细节。