Добавить текущему пункту меню свой класс

Тема в разделе "JavaScript", создана пользователем zek24, 27 авг 2014.

Статус темы:
Закрыта.
Модераторы: ZiX
  1. zek24

    zek24

    Moderator
    Регистр.:
    14 ноя 2009
    Сообщения:
    776
    Симпатии:
    230
    Привет
    Ситуация следующая:
    есть сайтна ВП в котором адрес страницы типа site.com/razdel1/news12.html или site.com/razdel4/news3.html
    Есть меню типа
    HTML:
    <div id="menu">
    <ul>
        <li>razdel1</li>
        <li>razdel2</li>
        <li>razdel3</li>
        <li>razdel4</li>
    </ul>
    </div>
    Требуется при нахождении в разделе, скажем razdel2, или в новости раздела2 (в урл есть razdel2) добавить li некий класс, например add class action. Вроде простая задача даже для незнающего JS, но не получается...
    Подскажите что делать.
     
  2. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.418
    Симпатии:
    109
    это делается на php: if-else
    Можно сделать на js конечно... но это извращение.
    Что-то такое:
    HTML:
    var arrPath = window.location.pathname.split( '/' );
    $('#menu li:contains(arrPath[1])').addClass("active");
    Может быть ошибка правда... Не проверить.
     
    Последнее редактирование: 27 авг 2014
  3. zek24

    zek24

    Moderator
    Регистр.:
    14 ноя 2009
    Сообщения:
    776
    Симпатии:
    230
    Я конечно сделал на пхп, хоть и не лучшим способом.
    PHP:
    <?php  $pieces explode("/"$_SERVER['REQUEST_URI']);?>
    <ul class="mymenu">
        <li><a class="<?php foreach($pieces as $some){if($some == 'cat1'){echo 'action';}}?>" href="site.com/cat1">категория1</a>
    <ul class="sub-menu">
        <li><a class="<?php foreach($pieces as $some){if($some == 'podcat1'){echo 'action';}}?>" href="site.com/cat1/podcat1">подкатегория1</a></li>
        <li><a class="<?php foreach($pieces as $some){if($some == 'podcat2'){echo 'action';}}?>" href="site.com/cat1/podcat2">подкатегория2</a></li>
        <li><a class="<?php foreach($pieces as $some){if($some == 'podcat3'){echo 'action';}}?>" href="site.com/cat1/podcat3">подкатегория3</a></li>
    </ul>
    </li>
        <li><a class="<?php foreach($pieces as $some){if($some == 'cat2'){echo 'action';}}?>" href="site.com/cat2">категория2</a>
    <ul class="sub-menu">
        <li><a class="<?php foreach($pieces as $some){if($some == 'podcat4'){echo 'action';}}?>" href="site.com/cat2/podcat4">подкатегория4</a></li>
        <li><a class="<?php foreach($pieces as $some){if($some == 'podcat5'){echo 'action';}}?>" href="site.com/cat2/podcat5">подкатегория5</a></li>
    </ul>
    </li>
    </ul>
    Но будем откровенны, это не подойдет для меню из 50 пунктов...
    Казалось что на JS написать проще...
    что-то типа для каждого пункта меню с таким-то айди, если его href совпадает с текущим урлом добавить класс такой-то.
    Подскажите как это на JS сформулировать. Код выше не сработал...
     
  4. murlo

    murlo Создатель

    Регистр.:
    8 июн 2006
    Сообщения:
    34
    Симпатии:
    33
    PHP:
    <script>
    onload = function(){
      
    _path document.location.href;
      
    _links document.links;
      
    _len _links.length;
      for(var 
    0_leni++){
        if(
    _links[i].href == _path && (_links[i].parentNode.parentNode.className == 'sub-menu' || _links[i].parentNode.parentNode.className == 'mymenu')){
          
    _links[i].className 'myClass';
        }
      }
    }
    </script>
    <style>
    .myClass{color: #FF0000;}
    </style>
    <ul class="mymenu">
      <li><a href="?cat1">категория1</a>
        <ul class="sub-menu">
          <li><a href="?podcat1">подкатегория1</a></li>
          <li><a href="?podcat2">подкатегория2</a></li>
          <li><a href="?podcat3">подкатегория3</a></li>
        </ul>
      </li>
      <li><a href="?cat2">категория2</a>
        <ul class="sub-menu">
          <li><a href="?podcat4">подкатегория4</a></li>
          <li><a href="?podcat5">подкатегория5</a></li>
        </ul>
      </li>
    </ul>
    Ссылки я подправил для себя, что бы проверить. Вам этого не надо. Только JavaScript добавить. Ну и класс, что бы нужный был.
     
    zek24 нравится это.
Статус темы:
Закрыта.