Активный класс удаляется при загрузке страницы

Question

Активный класс удаляется при загрузке страницы

0

Я пытаюсь сделать простой активный класс для элемента nav. Хеш нав.

<footer>
    <ul>
      <li>
        <a class="footer-link" href="#contact" data-scroll><span class="icon-chat">         </span>Contact</a>
      </li>
      <li>
        <a class="footer-link" href="#work" data-scroll><span class="icon-tools-2"></span>Work</a>
      </li>
      <li>
        <a class="footer-link" href="#services" data-scroll><span class="icon-briefcase"></span>Services</a>
      </li>
      <li>
        <a class="footer-link" href="blog.html"><span class="icon-pencil"></span>Blog</a>
      </li>
    </ul>
  </footer>

И тогда js:

 $('a.footer-link').click(function() {
 $('a.footer-link').removeClass("active");
  return $(this).addClass("active");
 });

Каждый раз, когда я меняю страницу на страницу блога - ссылка активна, но как только страница загружает ее. Первые три a находятся на одной странице и сохраняют "активный" класс, который он теряется при загрузке страницы блога.

Есть предположения?

jared 29 май 2014, в 22:25

Источник

1

Вы ожидали иначе?
Scimonster 29 май 2014, в 20:08
0

проверить этот пост - stackoverflow.com/questions/23851413/…
Nitish Dhar 29 май 2014, в 20:11
1

Активные классы устанавливаются кодом javascript (jQuery), который обрабатывает data-scroll которая не установлена для ссылки в блоге. Таким образом, блог должен регистрировать активный класс, например (pseudo :), if page == "blog" make Active element with href "blog.html"
Roko C. Buljan 29 май 2014, в 20:13
1

@RokoC.BuljanRokoC.Buljan, это должен быть ответ, а не комментарий.
Derek S 29 май 2014, в 20:16
0

@DerekS вы можете улучшить идею и опубликовать ответ. У меня недостаточно информации из кода OP, чтобы точно определить реальную проблему.
Roko C. Buljan 29 май 2014, в 20:19
0

data-scroll предназначен для плавной прокрутки ссылок. Блог не имеет одну причину, это не те же страницы, что и другие div.
jared 29 май 2014, в 20:37
0

Я работал над решением для вас здесь: jsfiddle.net/brewersomething/cYqcc/21 . Это, конечно, работает для приведенного вами примера, но у него есть некоторые ограничения, которые я пытаюсь исправить. Дайте мне знать, если вы хотите обсудить это дальше.
Ryan Brewer 30 май 2014, в 02:07

Показать ещё 5 комментариев

Теги:

javascript

jquery

html5

css3

1 ответ

Ещё вопросы

проверить этот пост - stackoverflow.com/questions/23851413/…
Активные классы устанавливаются кодом javascript (jQuery), который обрабатывает data-scroll которая не установлена для ссылки в блоге. Таким образом, блог должен регистрировать активный класс, например (pseudo :), if page == "blog" make Active element with href "blog.html"
@RokoC.BuljanRokoC.Buljan, это должен быть ответ, а не комментарий.
@DerekS вы можете улучшить идею и опубликовать ответ. У меня недостаточно информации из кода OP, чтобы точно определить реальную проблему.
data-scroll предназначен для плавной прокрутки ссылок. Блог не имеет одну причину, это не те же страницы, что и другие div.
Я работал над решением для вас здесь: jsfiddle.net/brewersomething/cYqcc/21 . Это, конечно, работает для приведенного вами примера, но у него есть некоторые ограничения, которые я пытаюсь исправить. Дайте мне знать, если вы хотите обсудить это дальше.

lindsay · Accepted Answer · 2014-05-30T02-07-00.000Z

Вы пробовали что-то вроде этого:

Установите класс в свой html-элемент для каждой страницы, например

<body class="blog">/* Your HTML*/</body>

И дополнительный класс для ваших предметов, возможно (если вы не хотите использовать селектор ahref для стилей)

<a class="footer-link blog"> ... </a>

И когда вы получите новую страницу, ваша глобальная вспомогательная функция JS проверит, что добавить.

(function () {

   var bodyClass = $('body').attr('class');

   switch (bodyClass) {
      case "blog":
         $('a.footer-link.body').addClass('active');
         break;
      default:
         /* other functions */
   };


})();