Codeigniter--将“活动”css类添加到链接，如何？答案

【问题标题】：Codeigniter--add "active" css class to link, how to?Codeigniter--将“活动”css类添加到链接，如何？
【发布时间】：2010-12-29 05:07:03
【问题描述】：

将“活动”类添加到链接以设置样式的最快和最简单的方法是什么？我正在使用 CI 开发一个应用程序，我想要一种快速简便的方法来自动执行此操作。

jQuery 也是一种选择...

【问题讨论】：

标签： php css codeigniter

【解决方案1】：

您确实应该使用 CodeIgniter URI 类而不是 $_SERVER['REQUEST_URI']

$this->uri->uri_string()


if ( $this->uri->uri_string() == '/contact' )

^^ 由于 codeigniter 的路由功能可能会发生一些复杂性，这是首选的做事方式

【讨论】：

是的，我最终使用了这种方法。
如果 ($this->uri->uri_string() == 'home') //去掉正斜杠

【解决方案2】：

取决于您输出链接 HTML 的方式。

如果您使用URL Helper 模块，那么您可以调用anchor() 函数来创建您的链接，并将属性数组作为第三个参数传递给它，即：

$this->load->helper('url');
echo anchor('url/path', 'Click here', array('class' => 'active'));

如果您只是在模板/视图中手动输出 HTML，显然您可以自己在 HTML 中创建类属性。

【讨论】：

【解决方案3】：

如果你有很多导航项，你可以这样做（非常简单）...

<ul>
<li<?= if ( $_SERVER['REQUEST_URI'] == '/contact' ): ?> id="active"<?php endif; ?>><a href="">contact</a></li>
</ul>

您必须根据需要对其进行编辑...

如果您没有那么多导航项，更简单的方法是给每个页面一个 body id，然后使用 css 使其处于活动状态。

<style type="text/css">
body#contact #contact-nav { font-weight:bold; }
</style>

<body id="contact">

<ul id="navigation">
    <li id="contact-nav"><a href="">contact</a></li>
</ul>

【讨论】：

太棒了。第一个选项有效（稍作调整）！

【解决方案4】：

您可以通过以下方式创建助手来做到这一点

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');
if ( ! function_exists('active_link'))
{
    function active_link($controller)
    {
        $CI =& get_instance();

        $class = $CI->router->fetch_class();
        return ($class == $controller) ? 'active' : '';
    }
}

然后在菜单视图中应用它

<li class="<?php echo active_link('services'); ?>"><a href="<?php echo base_url();?>services">Services</a></li>

【讨论】：

这个问题有 4 年历史了，你的回答并没有增加线程的好处......
这是迄今为止我遇到的最简单的代码块。谢谢 :)
@FahidMohammad 是的，这就是我在这里回答的原因，尽管这个问题已经很老了。

【解决方案5】：

要向链接添加活动类 (class="active")，我是这样做的：
在视图中

<ul class="nav nav-tabs"> 
        <li id="button_home" class='<?php echo $home;?>'><?php echo anchor('pages/index','Home');?></li>
        <li id="button_about" class='<?php echo $about;?>'><?php echo anchor('pages/about','About')?></li> 
</ul>

在控制器中

$data['home']="active";

也许这不是您的解决方案。但它对我有用。

【讨论】：