Question

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

这是我的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>

Heres my 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，您可以将其分解为段，然后您可以选择活动选项卡。（通过访问网址的操作部分，您甚至可以根据需要设置深度活动

。）

  $(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版

这是服务器端方法。如果当前控制器等于请求的控制器，则从视图中检查当前控制器并从服务器添加活动类。

    <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); ?>

Answer 2

$(document).ready(function(){

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

    });
  });
});

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

2 个答案: