Javascript PHP HTML JQUERY提交按钮类更改

我有一个小表单，它可以作为一个过滤器。所有我想要的是发送值到URL和有关的值显示活动按钮。 表单正在运行

<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>

在没有Jquery的情况下，单击按钮可以更改URL

使用JQUERY时，toogle可以工作，但不会更改URL 如何解决这个问题？ 谢谢大家!

试试这个

$('#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最有效

什么不起作用

这是小提琴

似乎对我有用

$('#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;
});

---

怎么了？它在我的测试中起作用：

在这里也很管用。我只是稍微修改了一下代码

$(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');
    }); 

});

---

不确定你想要实现什么，但这项工作：

$('#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');  
    }
});

---

编辑：也许我错了，但根据您的评论，您似乎需要重新加载页面以获得表单提交的结果。那么为什么不在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>

视图：
你能为这个发布JSFIDLE吗？使用CSS，您可以通过在事件侦听器中放置警报（'click'）或console.log（'click'）来验证是否确实调用了事件侦听器吗？页面上是否有其他id为“men”或“women”的对象？toogle可以工作，它可以更改类。但是它不会再改变$GET值了好的，你应该编辑你的问题并添加你的PHP代码。我认为你不需要javascript来实现你的目标。只需检查您的
$\u获取
值并在PHP中添加
类
，我就完成了。使用PHP。正确，不需要javascript
$('#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');  
    }
});

<?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>