Question

我知道这是一个非常常见的问题，我试图在javascript，css的帮助下更改活动类链接，但我无法弄清楚如何做到这一点。这里需要一些帮助...

查看：Navbar header.php

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right" id="nav1" >
        <li class="active">
            <a href="<?php echo base_url(); ?>">Home</a>
        </li>
        <li>
            <a href="<?php echo base_url(); ?>about">About</a>
        </li>
        <li>
            <a href='<?php echo base_url(); ?>register'> Register</a>
        </li>
        <?php if($this->session->userdata('logged_in')) : ?>
        <li class="dropdown">
            <a class="link" class="dropdown-toggle" data-toggle="dropdown" href="#">Profile<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href='<?php echo base_url(); ?>profile/index'><span class="glyphicon glyphicon-edit"> </span> About me</a></li>
                <li><a href='<?php echo base_url(); ?>profile/getskill'><span class="glyphicon glyphicon-edit"> </span> Skills</a></li>
            </ul>
        </li>
        <?php endif; ?>
    </ul>
</div>

Javascrpit：file active.js 加载到我页面的页脚

$(function(){
    $('#nav1 a').filter(function(){
        return this.href==location.href}).parent().addClass('active').siblings().removeClass('active')
    // $('#nav1 a').click(function(){
    //  $(this).parent().addClass('active').siblings().removeClass('active')    
    // })
})

css：

ul #nav1 a { cursor: pointer; }

Answer 1

据我记得使用这个框架，你不需要javascript只是CSS active类。您只需使用$this->uri->segment();。

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right" id="nav1" >
            <li <?php if($this->uri->segment(1) == "/"){echo 'class="active"';}?>>
                <a href="<?php echo base_url(); ?>">Home</a>
            </li>
            <li <?php if($this->uri->segment(1) == "about"){echo 'class="active"';}?>>
                <a href="<?php echo base_url(); ?>/about">About</a>
            </li>
            <li <?php if($this->uri->segment(1) == "register"){echo 'class="active"';}?>>
                <a href="<?php echo base_url(); ?>/register">Register</a>
            </li>
    ...

Answer 2

它的建议不是解决方案

$class = $this->router->fetch_class();
 $method = $this->router->fetch_method();

这些将为你提供方法的类名，所以你可以像

那样

    <li class="active">
  <a href="<?php echo base_url(); ?>" <?php if ($method == "view" && $class == "pages") {
   echo 'class="active"';
} ?>>Home</a>
</li>
<li>
  <a href="<?php echo base_url(); ?>about" <?php if ($method == "index" && $class == "profile") {
   echo 'class="active"';
} ?>>About</a>
</li>
<li>
  <a href='<?php echo base_url(); ?>register' <?php if ($method == "index" && $class == "register") {
   echo 'class="active"';
} ?>> Register</a>
</li>

请记住，我认为home是您的控制器名称

Answer 3

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

例如： -

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

单击链接javascript，codeigniter时如何更改活动类

3 个答案: