How to change menu item class in bootstrap 3 template when going to another page?

C

Chvalov2014-07-16 19:21:05

css

Chvalov, 2014-07-16 19:21:05

There is a bootstrap 3 template, and there are menu items, but I don’t like the fact that no matter what page I’m on, I always have the feeling that I’m on the main page, since it’s written in the code <li class="active"><a href="/">Главная</a></li>
How to make it so that when I go to another page I have this the class was removed from this menu item and assigned to another ?
main.php file

<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>

And for example I go to the map ( 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>

P.S. the site script itself was pulled from here youtu.be/TB0XhsWpY-M?list=LLqAv1hTO1YdvdG3b6993wHg

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

L

Lorem Ipsum, 2014-07-17
@Chvalov

Here are 2 options for you.
I don't know what framework you use or something like that, maybe if I knew, I would probably suggest an adequate solution, but for now it's the only way.

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

First, you have an error in the code, I corrected it below + removed incomprehensible repeated if, why are they?
Secondly, if you decide to use your own version, then keep in mind that you need to define other variables, because you define only one, but you need all those used, in your case the easiest way to do this is by displaying them above the menu.

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

C

Chvalov, 2014-07-16
@Chvalov

Tried vod like this in 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>

And then in each page I assign a variable = activity
Post.php file
But something doesn’t work, can someone help?
And then even google turned away from me, started demanding a captcha
Or tell me how to tie this water to my code:

<?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-class-active-v-html-menyu-na-php

F

Fiery, 2014-07-18
@Fiery

The easiest way is through js (because you use jquery, then on it).
For each li in the menu, set an id, and then on the page to which the item leads, write:

<script type="text/javascript">
        $(document).ready(function () {
            $("#li_ID").addClass("active");
        });
</script>