Как в шаблоне bootstrap 3 сменить класс пункта меню при переходе на другую страницу?

Есть шаблон bootstrap 3, и есть пункты меню, но мне не нравится то что на какой-бы я странице не находился у меня вечно чувство что я на главной странице, так как в коде прописано <li class="active"><a href="/">Главная</a></li>

Как сделать чтобы при переходе на другую страницу у меня этот класс убирался с этого пункта меню и присваивался другому ?

Файл main.php
<html lang="ru">
  <head>
    <meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="/css/bootstrap-theme.css">
	<link rel="stylesheet" type="text/css" href="/css/bootstrap-theme.min.css">
	<script language="JavaScript" src="/js/jquery.min.js" type="text/javascript"></script>
	<script language="JavaScript" src="/js/bootstrap.js" type="text/javascript"></script>
	<script language="JavaScript" src="/js/bootstrap.min.js" type="text/javascript"></script>
	
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
  </head>
  <body>
     <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="row-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="/">Овис - центр управления</a>
		  </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="/">Главная</a></li>
			  <?if (!$this->user) {?>
              <li><a href="/?login">Войти</a></li>
			  <?}?>
			  <? if ($this->user) {?>
              <li><a href="/?add">Добавить пост</a></li>
			  <? } ?>
			  <? if ($this->user) {?>
              <li><a href="/?map">Карта сети</a></li>
			  <? } ?>
            </ul>
          </div>
        </div>
      </div>
    <div class="container-fluid">
		<div class="starter-template">
			<? $this->out($this->tpl,true); ?>
		</div>
    </div>
	</body>
</html>


И например я перехожу на карту (map.php)
<link href="/css/map.css" rel="stylesheet">
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=ru-RU"></script>
<script type="text/javascript"src="/js/map.js"></script>
<body>
		<button class="btn btn-default btn-primary" onclick="GetMap()">Загрузить карту</button> 
		<button class="btn btn-default disabled" disabled onclick="ZoomOut();"><span class="glyphicon glyphicon-zoom-out"></span></button>
		<button class="btn btn-default disabled" disabled onclick="ZoomIn();"><span class="glyphicon glyphicon-zoom-in"></span></button>		
		<p>Координаты точки (Широта, Долгота): <input id='textBox' type="text" style="width:250px;"/></p>		
		<div id="maps" class="maps">
		
		<div id="mapDiv" class="map"></div>
		</div>
</body>

<? // Активные и не активные клавиши ?>
<script type="text/javascript">
var buttons = $(".btn");

buttons.eq(0).click(function() { buttons.filter(".disabled").removeClass("disabled").attr('disabled',false);
	$(this).addClass("disabled").attr('disabled',true);  
});
</script>


П.С. сам скрипт сайта был стянут отсюда youtu.be/TB0XhsWpY-M?list=LLqAv1hTO1YdvdG3b6993wHg
  • Вопрос задан
  • 5810 просмотров
Решения вопроса 1
nobodynoone
@nobodynoone
Вот вам 2 варианта.

Первый

Я не знаю, что вы используете за фреймворк или что то подобное, возможно если бы знал, то возможно предложил бы адекватное решение, но пока что только так.

<?php 
    function c($u) {
        $t = array('', 'active');
        return $t[intval($u == $_SERVER['REQUEST_URI'])];
    }
?>

<div class="collapse navbar-collapse">
	<ul class="nav navbar-nav">
	  <li class="<?=c('/')?>"><a href="/">Главная</a></li>
	  <li class="<?=c('/?login')?>"><a href="/?login">Войти</a></li>
	  <?if ($this->user) {?>
	  <li class="<?=c('/?add')?>"><a href="/?add">Добавить пост</a></li>
	  <li class="<?=c('/?map')?>"><a href="/?map">Карта сети</a></li>
	  <? } ?>
	</ul>
  </div>


Второй
Во-первых, у вас ошибка в коде, ниже я ее исправил + убрал непонятные повторяющиеся if, зачем они?
Во-вторых, если вы решили пользоваться своим вариантом, то имейте ввиду, что вам нужно определять и другие переменные, потому что вы определяете только одну, а надо все используемые, в вашем случае легче всего это сделать выведя их над меню.

<?php
    $home = '';
    $login = '';
    $add_post = '';
    $eth_map = '';
?>

<div class="collapse navbar-collapse">
		<ul class="nav navbar-nav">
		<li class="<?=$home;?>"><a href="/">Главная</a></li>
		<li class="<?=$login;?>"><a href="/?login">Войти</a></li>
		<?if ($this->user): ?>
		<li class="<?=$add_post;?>"><a href="/?add">Добавить пост</a></li>
		<li class="<?=$eth_map;?>"><a href="/?map">Карта сети</a></li>
		<? endif; ?>
	</ul>
</div>
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Chvalov
@Chvalov Автор вопроса
Пробовал вод так в main.php
<div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="<?=$home;?>"><a href="/">Главная</a></li>
			  <?if (!$this->user) {?>
              <li class="<?=$login;?>"><a href="/?login">Войти</a></li>
			  <?}?>
			  <? if ($this->user) {?>
              <li class="<?=$add_post;?>"><a href="/?add">Добавить пост</a></li>
			  <? } ?>
			  <? if ($this->user) {?>
              <li class="<?$eth_map;?>"><a href="/?map">Карта сети</a></li>
			  <? } ?>
            </ul>
          </div>


А потом в каждой странице назначаю переменой = активность
Файл post.php
<? $home = "active"; ?>

Но что то оно не работает, может кто то поможет ?
А то от меня даже й google отвернулся, начал каптчу требовать

Или подскажите как мне к моему коду прикрутить вод это:
<?php foreach($result as $item): ?>
<a href="/link.php?menu=<?php echo $item['id']; ?>"
<?php if($_GET['menu'] == $item['id']) { echo "class='active'";} ?>>
<?php echo $item['name']; ?></a>
<?php endforeach; ?>
labdes.ru/kak-dobavit-klass-active-v-html-menyu-na-php
Ответ написан
Комментировать
@Fiery
Проще всего через js (т.к. ты используешь jquery, то на нём).
Для каждой li в меню задай id, а затем на странице на которую пункт ведёт пропиши:
<script type="text/javascript">
        $(document).ready(function () {
            $("#li_ID").addClass("active");
        });
</script>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы