Я создаю веб-сайт. Когда дело доходит до меню навигации, я перечислял его и мне нужно, чтобы класс навигационной панели был активным при нажатии на это меню. Это нормально, чтобы дать 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.