Question

我有这个小形式，可用作过滤器。我想要的只是发送值到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>

但是当谈到改变课程时，它不起作用有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 - toogle可以使用，但它不会更改网址这怎么可以解决？谢谢！

Answer 1

试试这个。

$('#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 2

什么不起作用？

这是小提琴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 3

怎么了？它正在我的测试中工作：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 4

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

});

Answer 5

不确定你想要实现的目标，但是这项工作：

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

编辑：也许我错了，但根据您的评论，您似乎需要重新加载页面才能获得表单提交的结果。那么为什么不在PHP中进行class切换呢？

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

PHP HTML JQUERY提交按钮类更改

5 个答案: