如何将活动类添加到 codeigniter 超链接？

Posted 2023-02-24

【中文标题】如何将活动类添加到 codeigniter 超链接？

【英文标题】：How to add active class to codeigniter hyperlinks?

【发布时间】：2013-08-15 02:17:06

【问题描述】：

我知道这个问题经常遇到，但我只是不知道如何使用已经回答的帖子来解决这个问题。

我有一个带有导航链接的标题。我想将class="active" 添加到当前处于活动状态的链接中。

如果我有以下导航，我该怎么做？

<nav>
    <ul id="main_nav">
        <li class="home">
            <a href="search">
                <i class="icon-search"></i>
                <span>BEDRIJF ZOEKEN</span>
            </a>
        </li>
        <li class="categorie">
            <a href="categorieen/all">
                <i class="icon-list-ul"></i>
                    <span>CATEGORIE</span>
            </a>
        </li>
        <li class="aanbieding">
            <a href="aanbiedingen">
                <i class="icon-shopping-cart"></i>
                    <span>AANBIEDING</span>
            </a>
        </li>
        <li class="vacature">
            <a href="vacatures">
                <i class="icon-copy"></i>
                <span>VACATURE</span>
            </a>
        </li>
        <li class="agenda">
            <a href="agenda">
                <i class="icon-calendar"></i>
                <span>AGENDA</span>
            </a>
        </li>
        <li class="contact">
            <a href="contact">
                <i class="icon-envelope"></i>
                <span>CONTACT</span>
            </a>
        </li>
    </ul>
</nav>

我试过了，但是没用：

<script>
$(function() 
    var href = $(this).find('a').attr('href');
    alert(window.location.pathname)
    if (href === window.location.pathname) 
      $(this).addClass('active');
    
); 
</script>   

也许有更好的 Codeigniter 方式？

【参考方案1】：

试试这个。我认为不需要 javascript 或 jquery。

如果您使用的是 codeigniter，那么您可以使用 URI 类。

<li class="home">
    <a class="<?php if($this->uri->segment(1)=="search")echo "active";?>" href="<?=base_url('search')?>">
        <i class="icon-search"></i>
        <span>BEDRIJF ZOEKEN</span>
    </a>
</li>

如果您遇到任何问题，请告诉我

【讨论】：

我猜这行得通，让我先看看它是否适用于其他链接：D

短版：<?=($this->uri->segment(1) == "search")) ? "active" : "" ?>

【参考方案2】：

我创建了一个助手并将其保存到名为“menu_helper.php”的助手目录中：

<?php 
if(!defined('BASEPATH')) exit('No direct script access allowed');

if(!function_exists('active_link')) 
  function activate_menu($controller) 
    // Getting the class instance.
    $ci = get_instance();
    // Getting the router class to actived it.
    $class = $ci->router->fetch_class();
    return ($class == $controller) ? 'active' : '';
  

然后在 config/autoload.php 中，我在第 91 行添加了“菜单”作为助手。

最后一步是在访问页面（即登录页面）时打印“活动”类的代码：

<li class="<?php echo activate_menu('login'); ?>">    
  <?php echo anchor('login', 'Login'); ?> 
</li>

【讨论】：

这不愧是答案，非常优雅的解决方案。干得好！

【参考方案3】：

if (href === window.location.pathname) 
   $('a[href='+ href +']').addClass('active');

【讨论】：

您可以在此处查看该站点：kees.een-site-bouwen.nl/search 我刚刚定向到 /search 以查看它是否有效。 window.location.pathname 是 /search 所以我不知道为什么它不起作用。

@KeesSonnema 让我检查一下

请改用$('a[href*='+ href +']') 或$('a[href$='+ href +']')。

那么好 Jquery 替代品。无论如何，谢谢，但我正在使用 codeigniter 方法:)

【参考方案4】：

试试这个：

<a class="<?=(current_url()==base_url('search')) ? 'active':''?>" href="<?=base_url('search')?>">