Greetings to all, tell me where there may be an error, the class does not change to an asset when you press the buttons, it turns out that the "review" button is always highlighted. What could be the error

<div id="menu"> <ul id="menuHead"> <li> <a href="/news" target="_top" class="newmessage">Новости</a> </li> <li class="active"> <a href="/profile" target="_top">Обзор</a> </li> <? $usid=$ _SESSION[ "user_id"]; $db->Query("SELECT * FROM ".$pref."_pm WHERE user_id_in = '$usid' AND status = 0 AND inbox = 1"); $sk = $db->NumRows(); if ($sk > 0) { $pmm = '<font color="red">('.$sk.')</font>'; } else { $pmm = '<font color="red">(0)</font>'; } ?> <li> <a href="/msg" target="_top" id="msgmenu">Сообщения <?=$pmm; ?></a> </li> <li> <a href="/hideout" target="_top">Пещера</a> </li> <li> <a href="/city" target="_top">Город</a> </li> <li> <a href="/robbery" target="_top">Охота</a> </li> <li> <a href="/stats" target="_top">ТОП-лист</a> </li> <li class="free-space "> <a href="/contats" target="_blank">Поддержка</a> </li> <li> <a href="/logout" target="_top">Выйти из игры</a> </li> <li id="doc_time"> <script type="text/javascript"> clock(); </script> </li> <script type="text/javascript"> var currentPage = $('#menuHead .active').text(); $('#header h1').text(currentPage); $(document).ready(function() { $('#menuHead li').live('click', function() { $('#menuHead .active').removeClass('active'); $(this).addClass('active'); }); }); </script> </ul> </div>
  • what version of jquery is used? live function - deprecated at 1.7 and removed at 1.9 - Grundy
  • worth jquery.1.4.4 - coolskript
  • the error is. what happens redirect when you click on a and since all pages have the same menu, and active is set only once in the markup, then after the redirect , the "review" button is always highlighted - Grundy

3 answers 3

 var currentPage = $('#menuHead .active').text(); $('#header h1').text(currentPage); $(document).ready(function() { $('#menuHead a').on('click', function(e) { e.preventDefault(); var $this = $(this), item = $(this).closest('li'); if(!item.hasClass('active')){ item.addClass('active') .siblings() .removeClass('active'); }else { item.removeClass('active'); } }); }); 
 /* для наглядности */ .active { background: #ccc; } 
 <script src="https://code.jquery.com/jquery-2.0.3.js"></script> <div id="menu"> <ul id="menuHead"> <li> <a href="/news" target="_top" class="newmessage">Новости</a> </li> <li class="active"> <a href="/profile" target="_top">Обзор</a> </li> <li> <a href="/msg" target="_top" id="msgmenu">Сообщения <?=$pmm; ?></a> </li> <li> <a href="/hideout" target="_top">Пещера</a> </li> <li> <a href="/city" target="_top">Город</a> </li> <li> <a href="/robbery" target="_top">Охота</a> </li> <li> <a href="/stats" target="_top">ТОП-лист</a> </li> <li class="free-space "> <a href="/contats" target="_blank">Поддержка</a> </li> <li> <a href="/logout" target="_top">Выйти из игры</a> </li> <li id="doc_time"> </li> </ul> </div>

  • What is different from the next answer? - Grundy
  • Uncaught ReferenceError: clock is not defined - Grundy
  • 2
    @Grundy, different in what works! clock left function - it is logical that the error gives! - HamSter
  • Once it gives an error, it no longer works. Plus, the selection logic is changed from the original, plus the transitions to other pages are broken - Grundy
  • one
    in essence, what is there, that in the neighboring answer is the same method - e.preventDefault() only here clicks are caught only on a , which once again changes the initial behavior - Grundy

Try this:

 <script type="text/javascript"> var currentPage = $('#menuHead .active').text(); $('#header h1').text(currentPage); $(document).ready(function() { $('#menuHead').on('click', 'li', function(e) { e.preventDefault(); $('#menuHead .active').removeClass('active'); $(this).addClass('active'); }); }); </script>
  • this does not work, because preventDefault needs to be done on element a and not li . Not to mention the fact that if a redirect to another page is expected - to prohibit it and stay on the same where they were - in fact means - to break the logic - Grundy
  • @Grundy, preventDefault can be done at any time. The main thing that it was the same event and its handler. But that transition will disappear - I agree. - Qwertiy ♦
  • @Qwertiy, yes, indeed, for some reason, I always thought it was the opposite :) - Grundy

The transition to the page does not stop lost return false and the transition is obtained by updating the entire page, but js does not know how to persist, it can be saved until the page reloads, to avoid this, you have to do it on the server, and for this you need to make a condition for each li .

 <?php $url = isset($_GET['page'])?$_GET['page']:''; ?> <li class="<?='/news'===$url?'active':''?>">

Well, I think as noted - this is at least hand-stamped, so do not be good, but this is your decision.

I advise you to look this way:

 <?php $pages = array( 'news' => array('Новости'), 'profile' => array('Профиль'), 'disableLink' => array('Выключенная кнопка', false) ); function menu(array $array) { $menu = ''; if ($array) { $url = filter_input(INPUT_GET, 'page'); foreach ($array as $key => $value) { $class = isset($value[1]) && is_bool($value[1]) && !$value[1] ? 'disable' : ''; if (!$class) { if ($url === $key) { $class = 'active'; $key = '#'; } } $class = $class ? ' class="' . $class . '"' : ''; $menu .= '<li' . $class . '> <a href="' . $key . '"> ' . $value[0] . ' </a> </li>'; } } return $menu; } ?> <ul> <?= menu($pages) ?> </ul>