CodeIgniter:如何“突出显示”用户当前所在页面的链接?

Posted

技术标签:

【中文标题】CodeIgniter:如何“突出显示”用户当前所在页面的链接?【英文标题】:CodeIgniter: How to 'highlight' the link of the page the user is currently on? 【发布时间】:2011-03-22 09:43:20 【问题描述】:

对 CodeIgniter 来说还是个新手,仍在掌握 MVC 方法。我只是想知道解决这个问题的最佳方法是什么:

我的导航栏突出显示当前活动的链接,如下所示:

<a href="index.hml" id="active">Index</a>
<a href="blog.hml">Blog</a>

现在,当我转到 blog.html 时,我希望 id="active" 进行相应的转换。 通常我会为每个链接分配一个变量,然后将其值设置为'id="active'。 不知何故,我认为这不是最好的方法。 有什么想法吗?

更新(2012 年 9 月 12 日) 自从提出这个问题后,我转向 Kohana 并扩展了一个完全为此目的创建的模块。现在,我需要做的就是在配置数组中指定我的菜单项,然后突出显示会自动发生。模块是here。

【问题讨论】:

【参考方案1】:

非特定于 CI,这只是对当前页面名称的逻辑检查。

当你在CI中获取页面名称如

$pageName = 'blog.html';

那么你可以做以下事情

<a href="index.html" <?php echo $pageName == 'index.html' ? 'id="active"' : ''; ?>>Index</a>
<a href="blog.html" <?php echo $pageName == 'blog.html' ? 'id="active"' : ''; ?>>Blog</a>

【讨论】:

赞成。但是,目前,使用class="active" 而不是id="active" 似乎是一种常见的做法【参考方案2】:

首先你不应该用 id 来做那种事情,id 是给页面上的每个 DOM 元素一个唯一的标识号,为了什么,我们最好使用一个类。

Code Igniter 提供了许多帮助程序和类,它们成为我们工具的一部分,您可能以前听说过“URL 段”。

$this->uri->segment(n)

允许您检索特定段。其中 n 是您要检索的段号。段从左到右编号。例如,如果您的完整 URL 是这样的:

http://example.com/index.php/news/local/metro/crime_is_up

段号是这样的:

    新闻 本地 地铁 crime_is_up

http://codeigniter.com/user_guide/libraries/uri.html

您可以使用它来检索代表您实际在浏览器上显示的活动页面的当前 URL 段。

【讨论】:

-1。为什么在服务器端解决方案如此简单时使用 javascript(参见 Paul Dragoonis 的回答)? 它可以工作,虽然我不能在 localhost 中使用 Paul 的较短格式,仍然很好 'old 我的方法仍然适用,您只需要从 CI 获取 $pageName 可能使用 'uri' 对象,具体取决于您的应用程序的构建方式。【参考方案3】:

我使用了@Calle 示例,效果非常好...我确实必须使用自定义 url 抓取器而不是 CI current_url(),因为我正在使用 .htaccess 绕过 index.php 文件。我还添加了正确的属性标签。

初学者注意事项 我在名为 'menu_helper.php' 的 'helpers' 中创建了这个文件,并通过控制器 $this->load->helper('menu');

加载它

helpers/menu_helper.php

if ( ! function_exists('menu_anchor'))

    function menu_anchor($uri = '', $title = '', $attributes = '')
    
        $title = (string) $title;

        if ( ! is_array($uri))
        
            $site_url = ( ! preg_match('!^\w+://! i', $uri)) ? site_url($uri) : $uri;
        
        else
        
            $site_url = site_url($uri);
        

        if ($title == '')
        
            $title = $site_url;
        

        if ($attributes != '')
        
            $attributes = _parse_attributes($attributes);
        

        $current_url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] : "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
        $attributes .= ($site_url == $current_url) ? 'class="active"' : 'class="normal"';


        return '<a href="'.$site_url.'"'.$attributes.'>'.$title.'</a>';
    

视图文件:

<ul class="topnav love">
    <li class="topnav-1"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li>
    <li class="topnav-2"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li>
    <li class="topnav-3"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li>
    <li class="topnav-4"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li>
    <li class="topnav-5"><?=menu_anchor(base_url()."path/to/something", "menu_item")?></li>
</ul>

css:

ul.topnav li.topnav-1 a.active 聪明的东西

【讨论】:

这对我来说非常有效。只是想补充一点,您必须在 ['helpers'] 中的自动加载文件中设置菜单。谢谢老兄(ette)!【参考方案4】:

我使用下面的代码 - 干杯!

<?php echo ($this->uri->segment(1)=='dashboard' && $this->uri->segment(2)=='')? 'active' : ''; ?>

【讨论】:

【参考方案5】:

我从上面的评论中看到,也许您正在寻找更紧凑的东西。默认情况下,Codeigniter 中没有类似的功能,但制作它很容易。这只是我现在整理的东西,但它可能是你想要的。

首先,看一下手册中的 URL 助手。 http://codeigniter.com/user_guide/helpers/url_helper.html

具体看锚函数,了解如何使用。你应该习惯使用这个帮助器、HTML 帮助器和表单帮助器。它将改善您的观点。我们可以在系统文件夹中使用所有帮助程序。我所做的只是打开了 URL 帮助程序并复制了锚代码,然后我在 application 下的 helper 文件夹中创建了自己的帮助文件。您可以在手册中阅读有关创建自己的助手和自动加载它们的更多信息。

然后我对其进行了一些更改。最终结果如下所示:

if ( ! function_exists('menu_anchor'))

    function menu_anchor($uri = '', $title = '', $attributes = '')
    
        $title = (string) $title;

        if ( ! is_array($uri))
        
            $site_url = ( ! preg_match('!^\w+://! i', $uri)) ? site_url($uri) : $uri;
        
        else
        
            $site_url = site_url($uri);
        

        if ($title == '')
        
            $title = $site_url;
        

        if ($attributes != '')
        
            $attributes = _parse_attributes($attributes);
        

    $attributes .= ($site_url == current_url()) ? ' selected' : '';

        return '<a href="'.$site_url.'"'.$attributes.'>'.$title.'</a>';
    

如您所见,这只是一行修改: $attributes .= ($site_url == current_url()) ? '选中' : '';

基本上,如果检索到的页面的 URL 与锚链接到的页面匹配,它会添加所选的类。如果您不希望所选链接链接到任何特定位置,您也可以通过将 $site_url 设置为 # 或其他内容来轻松解决此问题。

【讨论】:

以上是关于CodeIgniter:如何“突出显示”用户当前所在页面的链接?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 PDFKit 突出显示 pdf 中的选定文本?

当英雄图像进入视口时如何突出显示缩略图

如何使 UITableViewCell 突出显示状态持续存在

如何像 Apple 一样突出显示 UIView

触摸时 EditText 未突出显示

CKEditor 5如何从任何小部件/模型/视图中获取单击,更新和删除的事件