Jquery toggleClass теряет класс при нажатии на ссылки или обновлении страницы

0

Когда ссылка не указывает нигде (href= "#"), мой toggleClass работает так, как предполагается. Но как только я заполняю "href" URL-адресом, он больше не работает. Я подозреваю, что это потому, что страница обновлена? Но я совершенно новичок в JS. Если это проблема, как я могу обойти это? и если это не так, то что я сделал неправильно?

Итак, это мой текущий javascript с помощью jquery:

$(document).ready(function()
{
    $('.button').click(function()
    { 
        $('.buttonselected').removeClass('buttonselected');
        $(this).toggleClass('buttonselected'); 
    }); 
});

И это мой HTML-код:

<nav>
    <ul>
        <li> 
            <a class="button" href="?page=frontpage"> HOME </a> 
        </li>
    </ul>
</nav>

  • В списке есть больше ссылок, но это не имеет значения для этого вопроса.

  • Да, я использую PHP include.

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

  • Спасибо вам за помощь!

Теги:
click
toggleclass

2 ответа

1
Лучший ответ

Вы можете использовать event.preventDefault()

$('.button').click(function( event )
{ 
    event.preventDefault(); // default action of the event will not be triggered.

    $('.buttonselected').removeClass('buttonselected');
    $(this).toggleClass('buttonselected'); 
});

РЕДАКТИРОВАТЬ:

Если вы хотите загрузить свою главную страницу (как в своей ссылке) и присвоить ей класс с "кнопочным выбором", чем вам нужно использовать PHP.

Что-то вроде этого

if( isset($_POST['page']) ){
    $selectedPage = $_POST['page'];
}

Посмотреть

<a class="button <?php echo ($selectedPage=='frontpage')?' buttonselected':'' ?>" href="?page=frontpage"> HOME </a>
Поделиться
  • 0
    Да, это работает. Но тогда сама ссылка не срабатывает. Я хочу эффект, который дает мне это «событие», но с работающей ссылкой. Я использую строку запроса и PHP на моей странице.
  • 0
    Первоначально я сделал это с PHP, но это выглядело грязно, поэтому я удалил его. Я думал, что JQuery будет легко исправить и выглядеть чище. Думаю нет..
Показать ещё 4 комментария
1

Ты прав. Класс уходит, потому что страница перезагружается. Если вам нужна конкретная ссылка, чтобы иметь определенный класс при загрузке страницы, вам нужно будет что-то сделать с этой ссылкой. Либо вручную поместите класс в ссылку с php, либо выделите его каким-либо другим способом, чтобы JavaScript мог его найти.

Если ссылка, которая должна иметь класс, отличается от того, на какой ссылке вы нажали ранее, вам нужно будет использовать файл cookie или localStorage для сохранения этой информации.

Еще лучше, вы должны попытаться выяснить способ передачи этой информации, которая не связана с перезагрузкой страницы. Это было бы идеально, так как в большинстве случаев пользователям не нравится перезагружать страницы, когда они этого не ожидают.

РЕДАКТИРОВАТЬ:

Ответ @pszaba велик, если вам не нужно использовать переменные строки запроса.

Поделиться
  • 0
    Это было бы идеально, да. И мне действительно не нужно каждый раз перезагружать всю страницу. Любая идея, где я могу начать? Информация о том, как это сделать?
  • 0
    Я мог бы помочь с этим. Можете ли вы дать мне более четкое представление о том, что вы хотите, чтобы ваше приложение делало и для чего используется информация в строке запроса?
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню