некоторые проблемы с навигационным меню начальной загрузки
Я нашел несколько примеров боковой и верхней навигации. Я получил его почти так, как хотел бы, но есть некоторые вещи, которые я не могу заставить его работать:
Вот jsFiddle рабочего примера.
1) Как добавить активный класс в выбранный пункт в меню и удалить активный класс из предыдущего?
2) Как изменить значок на стрелку вниз при расширении меню и при закрытии назад на стрелку влево?
3) Все примеры, которые я нашел в Интернете с панелями администратора, подобными этой, имели независимые страницы. Поэтому, если кто-то щелкнет по пункту меню, он снова загрузит заголовок, раздел тела и все сценарии, поэтому я решил создать один файл с навигацией вверху и слева и загружать контент только по пункту меню, например:
$(".side-nav a").click(function(e) {
e.preventDefault();
$("#page-wrapper").load($(this).attr("href")); //some filename.php
});
это правильный способ сделать это? (Я заметил, что мне пришлось удалить мой .htaccess с Order deny,allow Deny from all)
Решение
По первому вопросу вы должны получить из вашего php-кода текущую страницу и сравнить ее с нажатой ссылкой (a), чтобы затем на странице загрузки проверить, какая ссылка активна. если это одна страница с разделами и каждый элемент просто передает пользователя на якорь (идентификатора элемента) -> Вы должны исправить код, чтобы он был красивым, извините, у меня нет времени, чтобы сделать больше, чем это сейчас 🙁
$('.side-nav').on('click', function(e){
$('a').removeClass('active');
$(e.target).addClass('active');});
Для второго вопроса используйте следующий CSS
[aria-expanded="false"] > i.fa-caret-left { transform: rotate(0deg); transition: all ease-in-out .4s; }
[aria-expanded="true"] > i.fa-caret-left{ transform: rotate(-90deg); transition: all ease-in-out .4s;}
Что касается вашего третьего вопроса, я не уверен, что понимаю, что вы пытаетесь сделать.
Если я предполагаю, что истина, вы пытаетесь ввести «HTML» внутри элемента #wrapper?
Если так, да, вы можете сделать это.
Если вы хотите перенаправить на значение ссылки $ (this) .attr («href»), вы должны написать это так:
location.href = $(this).attr("href");
Надеюсь, я тебе помог.
Другие решения
Других решений пока нет …
detector