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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用jquery怎么实现点击一栏目实现栏目变色,再点击另一栏目也变色,但原来的变回原色相关的知识,希望对你有一定的参考价值。

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

效果:

代码:

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

参考技术A

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

Html

<!DOCTYPE>
<html>
<head>  
<title>常用信息查询</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>  
<style type="text/css">
/*按钮*/
.btndisplay: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.activebackground-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-defaultbackground-color:#e6e6e6
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.activecolor:#333;background-color:#c7c7c7;border-color:#c7c7c7
/*成功*/
.btn-successcolor:#fff;background-color:#5eb95e; border-color:#5eb95e
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.activecolor:#fff;background-color:#429842;border-color:#429842
 

color:red;
font-size:20px;
 
</style>
<body>
<button type="button" class="btn btn-default">栏目一</button>&nbsp;&nbsp;<button type="button" class="btn btn-default">栏目二</button>&nbsp;&nbsp;<button type="button" class="btn btn-default">栏目三</button>
&nbsp;&nbsp;<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);
);
);

实现效果

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

参考技术B <!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>

用advanced system3.7怎么卸载瑞星软件

参考技术A 用户您好:
对给您造成的不便表示歉意。
瑞星杀毒软件的卸载方法如下:
方法1、(推荐)点屏幕左下角的【开始】菜单,找到【程序/所有程序】,找到【瑞星杀毒软件】栏目,点击栏目中的【修复】,此时会弹出瑞星软件维护模式界面,选择界面中的【卸载】后点击“下一步”,去掉界面下方“保留用户配置文件”的勾选再点“下一步”,按照程序提示输入验证码后一直“下一步”,直至卸载完成。

方法2、打开系统【控制面板】,找到【添加或删除程序】(win7系统为【卸载程序】或【程序和功能】),打开后在界面中鼠标左键单击【瑞星杀毒软件】(win7系统为右键单击),点【更改/删除】(win7系统为【卸载/更改】),此时会弹出瑞星软件维护模式界面,选择界面中的【卸载】后点击“下一步”,去掉界面下方“保留用户配置文件”的勾选再点“下一步”,按照程序提示输入验证码后一直“下一步”,直至卸载完成。

注意:如之前是使用第三方软件或程序卸载瑞星杀毒软件,导致卸载不完全并无法按照以上方式正常卸载的话,请登录 http://pc.rising.com.cn/ 网站,找到【瑞星杀毒软件】的“安装包下载”,下载后按照默认方式正常安装,之后再按照以上方式卸载瑞星杀毒软件即可。

以上是关于用jquery怎么实现点击一栏目实现栏目变色,再点击另一栏目也变色,但原来的变回原色的主要内容,如果未能解决你的问题,请参考以下文章

利用jquery实现网站中对应栏目下面内容切换效果。

JQuery实现鼠标滑过显示导航下拉列表

PHP mysql sql 怎么根据ID查找栏目 因为有700多个3级栏目 不想一个个复制模板 手动修改ID

用advanced system3.7怎么卸载瑞星软件

网站栏目怎么出现下拉菜单,就是鼠标放上去怎么显示二级栏目?

jquery手机触屏左右滑动切换栏目怎么做