58问答库 > 用jquery怎么实现点击一栏目实现栏目变色,再点击另一栏目也变色,但原来的变回原色

用jquery怎么实现点击一栏目实现栏目变色,再点击另一栏目也变色,但原来的变回原色

2024-11-02 10:26:13

推荐回答（3个）

回答（1）：

效果：

代码：



 
  
  
  
  
  
  Document



 
 
  
    首页

    公司介绍
    成功案例

    解决方案

    联系我们

回答（2）：

如果需要使用jquery实现这种效果，可以参考如下代码：

Html



  
	常用信息查询
	
  

/*按钮*/
.btn{display:inline-block;cursor:pointer;text-align:center; font-weight:400;white-space:nowrap;vertical-align: middle;*zoom:1;-webkit-transition:background-color .1s linear;-moz-transition:background-color .1s linear;-o-transition:background-color .1s linear;transition:background-color .1s linear}
a.btn:hover,a.btn:focus,a.btn:active,a.btn.active,a.btn.disabled,a.btn[disabled]{text-decoration:none}
.btn:active,.btn.active{background-color:#ccc}
.btn:first-child{*margin-left:0}
.btn.active,.btn:active{-moz-box-shadow:0 1px 8px rgba(0, 0, 0, 0.125) inset;-webkit-box-shadow:0 1px 8px rgba(0, 0, 0, 0.125) inset; box-shadow:0 1px 8px rgba(0, 0, 0, 0.125) inset}
 
/*默认——灰色 通常用于取消*/
.btn-default{background-color:#e6e6e6}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active{color:#333;background-color:#c7c7c7;border-color:#c7c7c7}
/*成功*/
.btn-success{color:#fff;background-color:#5eb95e; border-color:#5eb95e}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active{color:#fff;background-color:#429842;border-color:#429842}
 
p {
	color:red;
	font-size:20px;	
} 

		
栏目一  栏目二  栏目三
  栏目四

Javascript

$(function() {
	$('button').click(function(){
		$(this).addClass("btn-success").siblings("button").removeClass("btn-success").addClass("btn-default");
		var text = $(this).text();
		$('p').text('切换到了' + text);		
	});		
});

实现效果

点击一个按钮会变成绿色，其他按钮会被置于灰色：

回答（3）：





demo


	$ (function ()
    {
	    $ ('ul li').click (function ()
	    {
		    $ (this).css ('background-color', 'red').siblings ('li').css ('background-color', '');
	    });
    });



	
		11111

		22222

		33333