jquery - 在导航面板上添加和删除 Active 类

Question

我尝试添加事件类并在访问导航栏上的另一个链接后自动删除它们。事件类将一直保留直到我访问另一个链接，但它无法正常工作。cakephp 链接生成简单的 anchor 标记。请帮助我和这些家伙..

这是我的HTML代码

<div id="wrap">
    <div class="navbar navbar-inverse navbar-fixed-top" style="border: 1px solid">
  <div class="navbar-header ">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="www.soft.com">company Inc.</a>
  </div>
  <div class="navbar-collapse collapse navbar-inverse-collapse">
    <ul class="nav navbar-nav">
    <li><a href="#">Dashboard</a></li>
      <li><?php echo $this->Html->link('Users', array('controller'=>'users', 'action'=>'index')); ?></li>
      <li><?php echo $this->Html->link('Department', array('controller'=>'Departments', 'action'=>'index')); ?></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Manage <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left">
      <input class="form-control col-lg-8" placeholder="Search" type="text">
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><?php if ($logged_in): ?>

                Welcome <?php echo $current_user['name']; ?>
                <?php endif; ?></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Actions <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Profile</a></li>
          <li><?php echo $this->Html->link('Logout', array('controller'=>'users', 'action'=>'logout')); ?></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</div>

这是我的 Jquery

$(document).ready(function(){

//active state  
$(function() {
    $('li a').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        $this.closest('li').children('a').removeClass('active');
        $this.parent().addClass('active');

    });
  });

});

Answer 1

使用页面刷新，您必须选择当前 url 以选择事件选项卡，一旦您获得路径 url，您可以将其分解为多个段，然后您可以选择事件选项卡。 (通过访问 url 的操作部分，您甚至可以根据需要设置深度事件)

  $(document).ready(function(){

    var pathname = window.location.pathname; // Returns path only

    var pathArray = window.location.pathname.split( '/' );//get url segments in to a array

    var secondLevelLocation = pathArray[0];// access url segements(u can even add more depth using this)

    if($('.active').length > 0){
    $('.active').removeClass('active');//remove current active element if there's
    }
    //add class depend on current url's url segment
    if(secondLevelLocation == 'users'){$('li:contains("Users")').addClass('active');}
    if(secondLevelLocation == 'departments'){$('li:contains("Departments")').addClass('active');}
    //add opition by url segments as u want in

    });

php版本

这是服务器端的方法。从 View 中检查当前 Controller ，如果当前 Controller 等于请求的 Controller ，则从服务器添加事件类。

    <li <?php if($this->params['controller'] == "user"){ echo 'class="active"';} ?>><?php echo $this->Html->link('Users', array('controller'=>'users', 'action'=>'index')); ?></li>

    <li <?php if($this->params['controller'] == "Departments"){ echo 'class="active"';} ?>><?php echo $this->Html->link('Department', array('controller'=>'Departments', 'action'=>'index')); ?></li>


Please comment if there's something wrong. Below code will help you inspect params available variables. 

      <?php  debug($this->params); ?>