导航栏中各按钮在点击当前按钮变色其他按钮恢复为原有色的实现方法（vue、jq、原生js）
一、vue如何实现？
代码：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<style type="text/css">
li{
list-style: none;
float: left;
margin-left: 5px;
background: yellow;
padding: 1px;
border-radius: 3px;
border:1px solid #999;
}
.active{
color:red;
}
</style>
</head> <body>
<div id="example">
<ul>
<li v-bind:class=" activeClass==index ? 'active' : '' " v-for="(item,index) in list" @click="getItem(index)">{{item.name}}</li>
</ul>
</div>
<script>
var example1 = new Vue({
el: '#example',
data: {
activeClass: -1,
list:[
{"typeId":"1","name":"按钮一","number":"50"},
{"typeId":"2","name":"按钮二","number":"50"},
{"typeId":"3","name":"按钮三","number":"50"},
{"typeId":"4","name":"按钮四","number":"50"},
{"typeId":"5","name":"按钮五","number":"50"},
{"typeId":"6","name":"按钮六","number":"50"},
{"typeId":"7","name":"按钮七","number":"50"},
{"typeId":"8","name":"按钮八","number":"80"},
],
},
watch: { },
methods: {
getItem: function (index) {
this.activeClass = index;
}
}
})
</script>
</body> </html>
效果图：
二、jq如何实现？
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>刘晓慧</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
li{
list-style: none;
float: left;
margin-left: 5px;
background: yellow;
padding: 1px;
border-radius: 3px;
border:1px solid #999;
}
.active{
color:red;
}
</style>
</head>
<body>
<div id="example">
<ul>
<li>按钮一</li>
<li>按钮二</li>
<li>按钮三</li>
<li>按钮四</li>
<li>按钮五</li>
<li>按钮六</li>
<li>按钮七</li>
<li>按钮八</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
$("li").click(function(){
$("li").removeClass("active");
$(this).addClass("active");
})
</script>
效果图：同上
三、原生js如何实现？
代码：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
li{
list-style: none;
float: left;
margin-left: 5px;
background: yellow;
padding: 1px;
border-radius: 3px;
border:1px solid #999;
}
.active{
color:red;
}
</style>
</head> <body>
<div id="example">
<ul>
<li>按钮一</li>
<li>按钮二</li>
<li>按钮三</li>
<li>按钮四</li>
<li>按钮五</li>
<li>按钮六</li>
<li>按钮七</li>
<li>按钮八</li>
</ul>
</div>
</body> </html>
<script type="text/javascript">
var buttons=document.getElementsByTagName("li");
var l=buttons.length;
for(var i=0;i<l;i++){
buttons[i].onclick=function(){
for(var j=0;j<l;j++){
if(this==buttons[j]){
this.className="active";
}else{
buttons[j].className="";
} }
}
}
</script>
效果图：同上
代码2（hwt）：
<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
</head>
<style>
.btn{background-color:yellow;}
</style>
<script type="text/javascript">
function change(obj){
var btn = document.querySelectorAll('.btn');
for(var i=0;i<btn.length;i++){
btn[i].style.color = "black";
}
document.getElementById(obj).style.color = "red";
}
</script>
<body>
<button type="button" value="" class="btn" onclick="change('a')" id="a">按钮一</button>
<button type="button" value="" class="btn" onclick="change('b')" id="b">按钮二</button>
<button type="button" value="" class="btn" onclick="change('c')" id="c">按钮三</button>
<button type="button" value="" class="btn" onclick="change('d')" id="d">按钮四</button>
<button type="button" value="" class="btn" onclick="change('e')" id="e">按钮五</button>
<button type="button" value="" class="btn" onclick="change('f')" id="f">按钮六</button>
<button type="button" value="" class="btn" onclick="change('g')" id="g">按钮七</button>
<button type="button" value="" class="btn" onclick="change('h')" id="h">按钮八</button>
</body>
</html>
导航栏中各按钮在点击当前按钮变色其他按钮恢复为原有色的实现方法（vue、jq、原生js）的更多相关文章
- 【代码笔记】iOS-在导航栏中显示等待对话框
一,效果图. 二,代码. ViewController.m #import "ViewController.h" @interface ViewController () @end ...
- bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容
问题1:如何去除bootstap中css中自带的overflow:hidden这个样式 今天遇见在bootstap中轮播图上的 附带图 片不能够显示出来,图片始终有一部分的高度 被隐藏了 后来通 ...
- 利用overflow实现导航栏中常 出现的倒三角下拉小图标
常用网页界面中,导航栏中的倒三角下拉小图标实现,可用overflow: 效果如右图: .Triangle{position:relative;width:280px;height:15px;} ;ov ...
- window10删除导航栏中的onedrive
前面介绍了如何删除导航栏中的“快速访问”,对于一个根本用不着的“oneDrive”肯定也得搞掉. 0.处理前: 1.卸载onedrive是不能清除导航栏里面的onedrive的,进入注册表regedi ...
- magento导航栏中如何加入home主页
magento在导航栏中加入home主页是很简单的,几个步骤即可在magento导航栏中加入home主页! 下面简单介绍下如何在magento导航栏中加入home主页: 首先我们打开对应应用的模板文件 ...
- 在开源UOJ的导航栏中添加新页面链接
前言 刚用开源UOJ搭建OJ成功时就想在导航栏那里添加一个站内页面链接,无奈当时乱搞水平低,网上也没有教程,不晓得怎么弄 今天突然来了闲情乱搞一通,结果还真乱搞成了...特意写下为后来人少走点弯路 前 ...
- SAP CRM 将组件整合至导航栏中
到现在,我们已经可以让组件独立地显示.我们只是运行它.让它显示在Web UI中.让我们把组件整合进导航栏,使我们可以在正常登录Web UI时访问它. 步骤一: 为你的UI组件主窗体创建一个内向插件. ...
- MMDrawerController在表视图和导航栏中的使用
1.如果不在APPDelegate引入MMDrawerController框架,那么就要注意在需要点击的视图控制器中的对象的获取. //工程中标签视图控制器 MainTabBarViewControl ...
- 关于uni-app导航栏中 中间大图标的设置
在uni-app的开发过程中,想要将位于中间的图标设置更大,通过一般的更改导航栏图标大小方式实现不了.经过查看官方文档可以发现,我们可以通过midbutton来设置中间tabbar的样式. 但前提是, ...
随机推荐
- iframe父页面与子页面赋值
最近因为公司之前的系统用iframe,里面的高度不能自适应,导致了很多问题,今天特意拿来研究一下,从网上找了一些方法试验了一下,这里记录一下成功的方法 1.父页面获取子页面的高度,并给父页面赋值 父页 ...
- 记AOP概念理解
OOD/OOP面向名词领域,AOP面向动词领域. 应用举例 假设有在一个应用系统中,有一个共享的数据必须被并发同时访问,首先,将这个数据封装在数据对象中,称为Data Class,同时,将有多个访问类 ...
- Google搜索中的突变XSS-JavaScript Library Introduced XSS Flaw in Google Search
前言2018年9月26日,开源Closure库(最初由谷歌创建并用于谷歌搜索)的一名开发人员创建了一个提交,删除了部分输入过滤.据推测,这是因为开发人员在用户界面设计方面出现了问题.但此次提交的开发人 ...
- .NET 内存分配笔记
阅读博客http://jonskeet.uk/csharp/memory.html的笔记(个人水平有限,如若翻译.记录有误,请提,谢谢~) 误区:引用类型保持在堆中,值类型保持在栈中. 问题:前半句正 ...
- Cocos Creater 监听程序到后台和重新到前台
cocos creator前后台切换当玩家在玩游戏时,突然接了一个电话,此时游戏会被切到后台待机,所有的声音播放都会停止,等打完电话,回到游戏,游戏又会被切回前台来,需要手动播放声音.可使用如下代码 ...
- Xamarin.Forms FlexLayout 布局扩展+ 模板扩展+弹性换行
Binding a FlexLayout to a Collection In May we published a doc on the new FlexLayout control that’ ...
- selenium各种定位方法（转）
selenium使用 Xpath CSS JavaScript jQuery的定位方法 (治疗selenium各种定位不到,点击不了的并发症) 2017年07月28日 22:47:36 阅读数:369 ...
- phpstorm----------phpstorm如何安装和使用laravel plugin
1.安装 2.安装成功以后,删除项目里面的.idea文件.然后关闭phpstrom,重新打开该项目,就会提示你 然后.idea里面就会生成 laravel-plugin.xml 文件.就可以使用直接C ...
- 客户端不能连接MySQL - 2003-Can't connect to MySQL server on '192.168.43.180'(10060 "Unknown error")
客户端不能连接MySQL 场景: 数据库(此处以MySQL为例)安装在虚拟机里面,在宿主机上进行连接数据库的时候始终不能连接,但在虚拟机中使用正常. 针对上面的场景: 1. 在虚拟机里面可以正常使用M ...
- 递归算法+sql三种分页
using Maticsoft.Common; using System; using System.Collections.Generic; using System.Data; using Sys ...