一、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）的更多相关文章

  1. 【代码笔记】iOS-在导航栏中显示等待对话框

    一,效果图. 二,代码. ViewController.m #import "ViewController.h" @interface ViewController () @end ...

  2. bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容

    问题1:如何去除bootstap中css中自带的overflow:hidden这个样式 今天遇见在bootstap中轮播图上的  附带图  片不能够显示出来,图片始终有一部分的高度  被隐藏了 后来通 ...

  3. 利用overflow实现导航栏中常 出现的倒三角下拉小图标

    常用网页界面中,导航栏中的倒三角下拉小图标实现,可用overflow: 效果如右图: .Triangle{position:relative;width:280px;height:15px;} ;ov ...

  4. window10删除导航栏中的onedrive

    前面介绍了如何删除导航栏中的“快速访问”,对于一个根本用不着的“oneDrive”肯定也得搞掉. 0.处理前: 1.卸载onedrive是不能清除导航栏里面的onedrive的,进入注册表regedi ...

  5. magento导航栏中如何加入home主页

    magento在导航栏中加入home主页是很简单的,几个步骤即可在magento导航栏中加入home主页! 下面简单介绍下如何在magento导航栏中加入home主页: 首先我们打开对应应用的模板文件 ...

  6. 在开源UOJ的导航栏中添加新页面链接

    前言 刚用开源UOJ搭建OJ成功时就想在导航栏那里添加一个站内页面链接,无奈当时乱搞水平低,网上也没有教程,不晓得怎么弄 今天突然来了闲情乱搞一通,结果还真乱搞成了...特意写下为后来人少走点弯路 前 ...

  7. SAP CRM 将组件整合至导航栏中

    到现在,我们已经可以让组件独立地显示.我们只是运行它.让它显示在Web UI中.让我们把组件整合进导航栏,使我们可以在正常登录Web UI时访问它. 步骤一: 为你的UI组件主窗体创建一个内向插件. ...

  8. MMDrawerController在表视图和导航栏中的使用

    1.如果不在APPDelegate引入MMDrawerController框架,那么就要注意在需要点击的视图控制器中的对象的获取. //工程中标签视图控制器 MainTabBarViewControl ...

  9. 关于uni-app导航栏中 中间大图标的设置

    在uni-app的开发过程中,想要将位于中间的图标设置更大,通过一般的更改导航栏图标大小方式实现不了.经过查看官方文档可以发现,我们可以通过midbutton来设置中间tabbar的样式. 但前提是, ...

随机推荐

  1. Schlumberger Petrel 2016.3 地震解释 油藏模拟

    Schlumberger Petrel 2016.3 地震解释 油藏模拟世界上顶尖的三维地质建模软件,软件为用户提供的工具可以用于地震解释.地质建模.油藏数 值模拟等方面的使用,清晰的地质模型可以描述 ...

  2. 为什么CentOS7中找不到mysql服务，并且还找不到mysql.sock？

    个人遇到问题的经过: 我一个月前买了云主机,UI图画好了,前端也写了,php如何开发也想好了,结果呢,安装apache是成功了,mysql看样子也是安装成功了,但是mysql根本无法运行起来,搞得我无 ...

  3. 5+移动App

    1.5+ App开发入门指南 https://www.cnblogs.com/tuyile006/p/5395909.html 2.5+ App开发Native.js入门指南 http://ask.d ...

  4. node概述

    1.什么是node:“一个搭建在Chrome JavaScript运行时 上的平台,用于构建高速.可伸缩的网络程序.Node.js采用的事件驱动.非阻塞I/O模型,使它 既轻量又高效,并成为构建运行在 ...

  5. js时间国际化

    d = new Date(); localTime = d.getTime();localOffset = d.getTimezoneOffset() * 60000; utc = localTime ...

  6. 灵雀云获邀加入CDF（持续交付基金会），成为中国区三大创始成员之一

    3月12日,在加州Half Moon Bay举行的开源领导者峰会(Open Leadership Summit 2019 )上,CDF(Continuous Delivery Foundation ) ...

  7. python练习--利用while循环和if语句,完成猜骰子的数字大小

    #exampleimport random# 骰子投掷的随机叔numnum = random.randint(1,6)# 输入一个猜测的数字temp = input("请输入一个整数:&qu ...

  8. 关于表格table嵌套,边框合并问题的解决方法，table嵌套（转）

    原文地址:http://www.cnblogs.com/zhangym118/archive/2016/05/16/5496931.html [问题] 外层table与内层table嵌套,内外表格都需 ...

  9. 如何共享联盟cookie

    接上一篇阿里妈妈账号登录状态如何长时间保存 既然我们获取到了cookie, 如果有多个程序都要使用到联盟帐号的时候, 如果不共享cookie, 那么每个程序都需要登录一次, 真的很浪费资源. 如何共享 ...

  10. jdk5升8问题记录-Spring2升4

    Spring2.x升4.x Hibernate3.x升5.0 jdbcOperations.queryForInt 替换为 queryForObject(sql, parameters, Intege ...