Vue实现导航栏点击当前标签变色功能

2024-10-03 09:48:36

本文实例为大家分享了Vue实现导航栏点击当前标签变色功能的具体代码，供大家参考，具体内容如下

1.效果

2.所有代码

<template>
  <div class="now-time">
   <div class="timebox">
   <a href="#" rel="external nofollow" v-for="(item,index) in nowTime" v-on:click="addClass(index)"
     v-bind:class="{ bgColors:index==current}">
    <p>{{item.time}}</p>
    <p>{{item.start}}</p>
   </a>
   </div>
  </div>

</template>

<script>
  export default {
    name: "Nowtime",
   methods: {
    addClass:function(index){
     this.current=index;
    }
   },
   mounted() {

   },
   data(){
    return{
     current:0,
     nowTime:[
      {
       time:"9:00",
       start:"已开抢"
      },
      {
       time:"10:00",
       start:"已开抢"
      },
      {
       time:"11:00",
       start:"已开抢"
      },
      {
       time:"12:00",
       start:"已开抢"
      },
      {
       time:"13:00",
       start:"未开抢"
      },
      {
       time:"14:00",
       start:"未开抢"
      },
      {
       time:"15:00",
       start:"未开抢"
      },
     ],
    }
   }
  }
</script>

<style scoped>
.now-time{
 width: 100%;
 height: .8rem;
 background: #282832;
 display: flex;
 overflow-x:scroll;
}
.timebox{
 width: 100%;
 height: .8rem;
 display: flex;
 background: #282832;
}
 .now-time a{
  display: flex;
  flex-direction: column;
  width: 1.35rem;
  height: .79rem;
  align-items: center;
  flex-shrink: 0;
 }
.now-time a p:first-child{
 font-size: .23rem;
 color: white;
 font-weight: bold;
}
.now-time a p:last-child{
 font-size: .16rem;
 color: white;
}
.timebox .bgColors{
 background: #ff5700;
}
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue实现a标签点击高亮方法

如下所示: <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--<link hre
vue实现点击当前标签高亮效果【推荐】

实现点击按钮使当前按钮高亮,其他按钮复原的效果实现思路 •在data中定义即将渲染的数据,及active data() { return { wpList: [ { name: '食品饮料' }, { name: '鲜花' }, { name: '蛋糕' }, { name: '水果生鲜' }, { name: '服装鞋帽' }, { name: '其它' } ], active:'' } } ... •定义高亮的标签类名 .active { background: #fd7522; bord
Vue实现导航栏点击当前标签变色功能

本文实例为大家分享了Vue实现导航栏点击当前标签变色功能的具体代码,供大家参考,具体内容如下 1.效果 2.所有代码 <template> <div class="now-time"> <div class="timebox"> <a href="#" rel="external nofollow" v-for="(item,index) in nowTime" v
vue+element导航栏高亮显示的解决方式

用导航菜单时遇到的一些问题:点击打开官网例子问题1: 页面强制刷新,按F5时,页面如果没有好好设置的话,导航栏默认叠起来,而且无高亮显示:刷新后导航栏显示和之前不一致,如图所示解决: html关键代码设置 :default-active="defaultUrl" 这儿的原理就是defaultUrl跟#/后面的一致,也就是说跟router.js中的path一致才行(router.js见后文) window.location.href.split('/#')[1] 获取的是"
vue头部导航动态点击处理方法

1:DATA中两个变量, data: { nav:['头条1','头条2'], ins:0,//记录当前点击的INDEX }, 2: <div v-for="(item,index) in nav" :class="index == ins ? 'swiper-slide swiper_active' : 'swiper-slide' " @click="topClick(index)">{{item}}</div> 3:
详解Vue底部导航栏组件

不多说直接上代码 BottomNav.vue: <template> <div class="footer"> <div v-for='(item,index) of items' :class='[item.cls,{on:index === idx}]' @click="$router.push(item.push)"> <img :src="index===idx?item.iconSelect:item.i
layui禁用侧边导航栏点击事件的解决方法

直接上代码吧 //JavaScript代码区域 layui.use(['element', 'laypage'],function(){ var element = layui.element; element.on('nav(test)', function(elem){ $(".layui-nav-tree").find(".layui-nav-child").css("display","contents"); });
vue设置导航栏、侧边栏为公共页面的例子

首先,项目结构如下: 想要让导航栏.侧边栏变为公共页面,则要在App.vue页面中加入.假设已经有了Header.vue和Left.vue,这里就不贴出来了,App.vue代码如下: <template> <div id="app">  <el-container > <el-header>  <header-nav></header-nav>
Vue实现导航栏的显示开关控制

一,制作导航栏 <template> <div class="space_header_text"> <ul> <router-link to="/order"> <li class="nav-item"> <div :class="['iconfont','interval','iconClass']"></div> 订单 </li&
Vue实现导航栏菜单

本文实例为大家分享了Vue实现导航栏菜单的具体代码,供大家参考,具体内容如下这里是刚学习vue的时候,没有用vue的任何UI组件库写的导航栏菜单. menu.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航栏左</title> <link rel="stylesheet" href="css/
vue实现导航栏下拉菜单

本文实例为大家分享了vue实现导航栏下拉菜单的具体代码,供大家参考,具体内容如下先看效果: 下拉菜单铺满全屏 <div class="nav">...</div> <div class="dropdown-content">...</div> .nav { position: relative; } .dropdown-content { position: absolute; width:
jQuery代码实现表格中点击相应行变色功能

对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link href=&

Vue实现导航栏点击当前标签变色功能

相关推荐

随机推荐