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

【问题标题】：how to change active class when clicking a link javascript, codeigniter单击链接时如何更改活动类javascript，codeigniter
【发布时间】：2017-09-21 13:52:38
【问题描述】：

我知道这是一个非常常见的问题，我尝试在 javascript、css 的帮助下更改活动类链接，但我不知道该怎么做。在这里需要一些帮助...

查看：导航栏 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：文件 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; }

【问题讨论】：

你试过使用$this->uri->segment();吗？
我也试过了，但我想我在那里做错了......@boang3000

标签： javascript php css twitter-bootstrap codeigniter

【解决方案1】：

这是一个建议而不是解决方案

$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 是你的控制器名称

【讨论】：

这段代码在哪里写：$class= $this->router->fetch_class(); $method = $this->router->fetch_method(); @VijaySharma
链接上方或页面顶部的@SohailShaikh
是的，添加到页面顶部仍然无法正常工作@VijaySharma
@SohailShaikh 你能告诉我controller 在其中register 存在吗，about 和home 也可以编辑我的答案。
@SohailShaikh 一件事你在项目中自动加载了url 助手吗？

【解决方案2】：

据我记得使用这个框架，你不需要 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>
    ...

【讨论】：

【解决方案3】：

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

例子：-

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

【讨论】：