リンクをクリックしたときにアクティブなクラスを変更するにはjavascript、codeigniter

Question

これは非常によくある質問ですが、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：ファイルは私のページ

$(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のフッターにロードされたをactive.js：

ul #nav1 a { cursor: pointer; } 

Answer 1

その提案ではないソリューション

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

あなたは私はhomeがあなたのコントローラ名であると仮定

<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> 

のようなあなたにそれらを覚えてできるように、これらはあなたにクラス名のnの方法を提供します

Answer 2

私はこのフレームワークを使用して覚えている限り、あなたはactiveクラスのjavascriptだけのCSSは必要ありません。 $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 3

ナビゲーションアイテムがたくさんある場合は、このようにすることができます（非常に単純化された）...

例： -

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