PHP HTML JQUERY Сменить класс кнопки ввода

Question

У меня есть эта небольшая форма, которая работает как фильтр. Все, что я хочу, - это отправить значения в URL-адрес и активировать активную кнопку value. Форма работает

<form id="filter" method="get" action=""> 
<label>View: 
<input type="submit" id="men" class="active" name="men" value="men" /> 
<input type="submit" id="women" class="normal" name="women" value="women" /> 
</label> 
</Form> 

Но когда дело доходит до изменения классов, он не работает Есть 2 класса (нормальный = нормальный, активный = подсвечена)

$('#men').click(function() { 
     $('#women').removeClass('active'); 
     $('#women').addClass('normal'); 
     $(this).removeClass('normal'); 
     $(this).addClass('active'); 
return false; 
}); 

$('#women').click(function() { 
     $('#men').removeClass('active'); 
     $('#men').addClass('normal'); 
     $(this).removeClass('normal'); 
     $(this).addClass('active'); 
return false; 
}); 

Без Jquery, изменения кнопки щелчка URL

С JQUERY - Google работает, но он не изменяется URL Как это можно решить? Спасибо!

Answer 1

Не уверен, что вы пытаетесь достичь, но эта работа:

$('#men').click(function(evt) { 
    evt.preventDefault(); 
    if($(this).hasClass('normal')){ 
     $(this).toggleClass('normal active'); 
     $('#women').toggleClass('normal active'); 
    } 
}); 

$('#women').click(function(evt) { 
     evt.preventDefault(); // this will prevent submitting your form 
    if($(this).hasClass('normal')){ 
     $('#men').toggleClass('normal active'); 
     $(this).toggleClass('normal active'); 
    } 
}); 

FIDDLE

---

EDIT: может быть, я ошибаюсь, но на основе вашего комментария вы, кажется, необходимо перезагрузить страницу, чтобы получить результат отправки формы. Так почему бы не сделать свой class переключатель в PHP?

<?php 
    $menBtnClass = 'normal'; 
    $womenBtnClass = 'normal'; 

    if(isset($_GET['men']) && $_GET['men'] === 'men') $menBtnClass = 'active'; 
    if(isset($_GET['women']) && $_GET['women'] === 'women') $womenBtnClass = 'active'; 
?> 
<form id="filter" method="get" action=""> 
    <label>View: 
    <input type="submit" id="men" class="<?php echo $menBtnClass; ?>" name="men" value="men" /> 
    <input type="submit" id="women" class="<?php echo $womenBtnClass; ?>" name="women" value="women" /> 
    </label> 
</form> 

Answer 2

Попробуйте это.

$('#men').click(function() { 
     $(this).toggleClass('normal active'); 
     $('#women').toggleClass('normal active'); 

return false; 
}); 

$('#women').click(function() { 
     $('#men').toggleClass('normal active'); 
     $(this).toggleClass('normal active'); 
return false; 
}); 

toggleClass является наиболее эффективным https://api.jquery.com/toggleClass/

Answer 3

Что не работает?

Вот скрипка http://jsfiddle.net/X8EqK/

Кажется, работает для меня

$('#men').click(function() { 
     $('#women').removeClass('active'); 
     $('#women').addClass('normal'); 
     $(this).removeClass('normal'); 
     $(this).addClass('active'); 
     return false; 
}); 

$('#women').click(function() { 
     $('#men').removeClass('active'); 
     $('#men').addClass('normal'); 
     $(this).removeClass('normal'); 
     $(this).addClass('active'); 
     return false; 
}); 

Answer 4

Что случилось? Он работает в моем тесте: fiddle

$('#men').click(function() { 
    $('#women').removeClass('active').addClass('normal'); 
    $(this).removeClass('normal').addClass('active'); 
    return false; 
}); 

$('#women').click(function() { 
    $('#men').removeClass('active').addClass('normal'); 
    $(this).removeClass('normal').addClass('active'); 
    return false; 
}); 

Answer 5

JSFiddle работает хорошо здесь. Я немного подтолкнул код.

$(function() { 

    $('#men').click(function(e) { 
     e.preventDefault(); 
     $('#women').removeClass('active').addClass('normal'); 
     $(this).removeClass('normal').addClass('active'); 
    }); 

    $('#women').click(function(e) { 
     e.preventDefault(); 
     $('#men').removeClass('active').addClass('normal'); 
     $(this).removeClass('normal').addClass('active'); 
    }); 

});