我正在创建一个网站。。当谈到导航菜单时,我列出了它,并需要导航栏类在单击该菜单时处于活动状态。为列表标记指定class="active"是可以的。但我需要它只有在点击时才处于活动状态。我怎样才能做到这一点。?我的列表是:
<div class="menu">
<ul class="nav" id="nav">
<li class="active">
<?php echo anchor("cntrl/index","Home"); ?>
</li>
<li><a href="#"><?php echo $this->session->userdata('user_name'); ?></a></li>
<li><a href="#">About</a></li>
<li>
<?php echo anchor("cntrl/jobs","Jobs"); ?>
</li>
<li>
<?php echo anchor('cntrl/logout','Logout'); ?>
</li>
<div class="clearfix"></div>
</ul>
<script type="text/javascript" src="<?php echo base_url(); ?>/js/responsive-nav.js"></script>
</div>
好吧,我处理这类问题如下:
将活动链接(单击链接时位于url中)设置为链接调用的控制器函数中的变量
$data['active_link'] = 'home'; # for example
在视图文件中检查(JS):
$(document).ready(function(){
var active_link = "<?php echo $active_link;?>";
$("li").removeClass('active');
$("#"+active_link).addClass('active');
});
使用以下代码。
<li class="<?php echo (endsWith($_SERVER['REQUEST_URI'], 'cntrl/jobs')? 'active':''); ?>">
<?php echo anchor("cntrl/jobs","Jobs"); ?>
</li>
该代码的主要部分是
endsWith($_SERVER['REQUEST_URI'], 'cntrl/jobs')
其中$_SERVER['REQUEST_URI']是您当前的URL。"cntrl/jobs"是您的菜单,正在使用当前URL进行检查。