用jquery怎么实现点击一栏目实现栏目变色,再点击另一栏目也变色,但原来的变回原色
<scripttype="text/javascript">functiona(tab){//alert("111");varobj=document.getElemen...
<script type="text/javascript" >
function a(tab){
//alert("111");
var obj=document.getElementById(tab);
var $obj=$(obj);
if($obj){
$obj.removeClass().addClass('activeon');
}else{
$obj.removeClass('activeon');
}
}
</script> 展开
function a(tab){
//alert("111");
var obj=document.getElementById(tab);
var $obj=$(obj);
if($obj){
$obj.removeClass().addClass('activeon');
}else{
$obj.removeClass('activeon');
}
}
</script> 展开
3个回答
展开全部
效果：
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
ul li{
float:left;
width: 110px;
margin: 0 5px;
background-color:#fff;
border:1px solid #000;
line-height:25px;
list-style: none;
text-align: center;
font-size:14px;
font-family:'微软雅黑';
cursor: pointer;
color:#000;
font-weight:bold;
}
ul li:hover,ul li.selected{
background-color:#000;
color:#fff;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
$(function(){
$("ul#navigator li").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
});
});
</script>
</head>
<body>
<ul id="navigator">
<li>首页</li>
<li class="selected">公司介绍</li>
<li>成功案例</li>
<li>解决方案</li>
<li>联系我们</li>
</ul>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如果需要使用jquery实现这种效果，可以参考如下代码：
Html
<!DOCTYPE>
<html>
<head>
<title>常用信息查询</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<style type="text/css">
/*按钮*/
.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;
}
</style>
<body>
<button type="button" class="btn btn-default">栏目一</button> <button type="button" class="btn btn-default">栏目二</button> <button type="button" class="btn btn-default">栏目三</button>
<button type="button" class="btn btn-success">栏目四</button>
<p></p>
<script src="js/jquery.js"></script>
<script>
</script>
</body>
</html>
Javascript
$(function() {
$('button').click(function(){
$(this).addClass("btn-success").siblings("button").removeClass("btn-success").addClass("btn-default");
var text = $(this).text();
$('p').text('切换到了' + text);
});
});实现效果
点击一个按钮会变成绿色，其他按钮会被置于灰色：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>demo</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$ (function ()
{
$ ('ul li').click (function ()
{
$ (this).css ('background-color', 'red').siblings ('li').css ('background-color', '');
});
});
</script>
</head>
<body>
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
</ul>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
