在我的网站上重置按钮

Question

的状态我在表格的标题中有4个css样式的按钮。当每个按钮被点击时，它当前会根据下面的脚本正确地更改css（以下代码可能不是实现此结果的最简单/最有效的方式）。

我想实现的是类似于单选按钮，因为当单击4个按钮中的每一个时，修改后的类将在之前单击的按钮上重置。

JQUERY：

$(document).ready(function(){ 
    $(".red-btn.pcb").click(function(){ 

     $(this).removeClass("red-btn"); 

     $(this).addClass("redsort-btn"); 

    }); 
     $(".blue-btn.pcb").click(function(){ 

     $(this).removeClass("blue-btn"); 

     $(this).addClass("bluesort-btn"); 

    }); 


     $(".green-btn.pcb").click(function(){ 

     $(this).removeClass("green-btn"); 

     $(this).addClass("greensort-btn"); 

    }); 


     $(".orange-btn.pcb").click(function(){ 

     $(this).removeClass("orange-btn"); 

     $(this).addClass("orangesort-btn"); 

    }); 

}); 

HTML：

<th><a class="red-btn pcb"><span> Red </span> </a><th> 
<th><a class="blue-btn pcb"><span> Blue </span> </a><th> 
<th><a class="green-btn pcb"><span> Green </span> </a><th> 
<th><a class="orange-btn pcb"><span> Orange </span> </a><th> 

Answer 1

如果你可以打开 '排序' 到它自己的类，你可以这样做以下：

$("a.pcb").click(function(){ 
    $(this) 
    .addClass("sort").closest("th").siblings("th") 
    .find("a").removeClass("sort"); 
}); 

而且然后修改您的CSS略有：

.orangesort-btn { font-weight:bold } 

到

.orange-btn.sort { font-weight: bold } 

Answer 2

为什么不使用CSS和jQuery的组合来做到这一点？你将无法追踪。当您添加“排序”作为一个类你想强调一个

<th><a class="red-btn pcb sort"><span> Red </span> </a><th> 
<th><a class="blue-btn pcb"><span> Blue </span> </a><th> 
<th><a class="green-btn pcb"><span> Green </span> </a><th> 
<th><a class="orange-btn pcb"><span> Orange </span> </a><th> 

：

你的HTML更改为。然后你可以使用下面的jQuery：

$(document).ready(function(){ 
    $("a.pcb").click(function(){ 
     $("a.pcb").removeClass("sort"); 
     $(this).addClass("sort"); 

    }); 
}); 

我假设a.pcb类对这些按钮是唯一的。然后在CSS，你只需要定义每个正常的和“排序”状态（这你基本上已经这样做）：

a.red-btn { 
    color: red; 
} 

a.red-btn.sort { 
    font-weight: bold; 
} 

说不上您的样式看起来像，但你应该明白我的意思是什么。哎呀，如果你的工作状态有同样的效果（只是加粗的东西，等等），你可以得到甚至雨衣，只需要一个排序类定义：

a.red-btn { 
    color: red; 
} 

a.blue-btn { 
    color: blue; 
} 

a.pcb.sort { 
    font-weight: bold; 
} 

Answer 3

好吧，我使用一个被称为推拉门样式的按钮“纯CSS btns “（http://www.halmatferello.com/lab/pure-css-btns/）

的CSS略作如下修改：

.pcb, .pcb span { 
    background: url('/_img/secondary-amended.png') no-repeat; 
    height: 23px; 
    line-height: 23px; 
    padding: 3px 0 7px 0; 
} 

.pcb, a.pcb:link, a.pcb:visited { 
    color: #333; 
    font-size: 11px; 
    padding-left: 14px; 
    text-decoration: none !important; 
} 
/* ie 6 hack */ 
* html div#frame .pcb { 
    color: #333; 
    padding-top: 0px; 
    padding-bottom: 0px; 
    text-decoration: none; 
} 
/* ie 7 hack */ 
*:first-child+html .pcb { 
    color: #333; 
    padding-top: 0px; 
    padding-bottom: 0px; 
    text-decoration: none; 
} 

.pcb span { 
    background-position: right -326px; 
    padding-right: 14px; 
} 


/*Normal State - Red*/ 
a.red-btn { 
    background-position: left -109px; 
    color: #fff !important; 
    padding-top: 3px; 
    font-weight: bold; 
} 
a.red-btn span { 
    background-position: right -435px; 
    padding-top: 3px; 
} 
a.red-btn:hover { 
    background-position: left -137px; 
} 
a.red-btn:hover span { 
    background-position: right -463px; 
} 


/*Clicked State - Red*/ 

a.redsort-btn { 
    background-position: left -219px; 
    padding-top: 3px; 
} 
a.redsort-btn span { 
    background-position: right -545px; 
    padding-top: 3px; 
} 
a.redsort-btn:hover { 
    background-position: left -246px; 
} 
a.redsort-btn:hover span { 
    background-position: right -572px; 
}