html5导航栏点击之后变色,vue实现导航栏点击当前标题变色

1.效果

2.步骤

首先在vue实例中生命一个数组，里面放置导航栏的内容，并声明两个变量，一个控制下方文字的变动，一个控制颜色的变动

然后再创建一个列表，通过v-for遍历数组，将这个数组显示到页面中，然后给这个li绑定一个有前置条件的样式，即当index==hahaha时，li就采用qwe1这个样式，最后给这个li添加一个点击事件，将我们的index作为参数传过去

根据传过来的index的值，来判断当前点击的是哪一个标题，然后做出相应的变化

选择菜单

li {

float:left;

width:50px;

height:30px;

border:chocolate 1px solid;

text-align:center;

line-height:30px;

color:#e2eded;

background:coral;

list-style:none;

margin-left:5px;

}

ul{

overflow:hidden;

}

.qwe1 {

background:#ff7fd7;

}

.qwer {

margin-top:10px;

margin-left:100px;

}

您选择了{{name}}

var vm =new Vue({

el:"#app",

data: {

name:'home',

hahaha:0,

list: [

{name:'home'},

{name:'菜单1'},

{name:'菜单2'},

{name:'菜单3'},

]

methods: {

dianji(index) {

if (index ==0) {

this.name ='home'

this.hahaha = index

}else if (index ==1) {

this.name ='菜单1'

this.hahaha = index

}else if (index ==2) {

this.hahaha = index

this.name ='菜单2'

}else {

this.name ='菜单3'

this.hahaha = index

}

html5导航栏点击之后变色,vue实现导航栏点击当前标题变色相关推荐

Vue 实现导航栏滑到顶部固定，滑动到相应位置导航栏有相应选中效果，点击导航跳转到对应位置
主要思路导航栏固定判断页面卷曲是否大于导航栏的offsetTop的值,超过了就证明导航栏到达了顶部,给导航栏添加固定样式的类名,注意:需要拿到导航栏固定前的offsetTop值,固定后的offse ...
vue底部跳转_详解Vue底部导航栏组件
不多说直接上代码 BottomNav.vue: {{item.name}} export default{ props:['idx'], data(){ return { items:[{ cls:& ...
html5导航栏向应折叠,超实用！网站导航栏设计形式总结
导航对于一个网站来说,起到重要的引导作用.一个优秀的导航设计可以让用户快速的找到所需 ,让用户清晰明了的了解到网站的结构框架,起到重要的指引作用.下面跟大家分享下常用的几种网页导航形式: 1.顶部导航 ...
VUE router 导航重复点击报错的问题解决两种方案
VUE router 导航重复点击报错的问题解决两种方案前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家 ...
Vue实现导航栏吸顶效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
vue 电梯导航制作（鼠标滚动控制导航栏的显示与隐藏）
鼠标滚动控制导航栏的显示与隐藏上图先看效果: 下面为2张图,默认为导航栏,当鼠标向下滚动一定距离时,变为箭头, 并且点击黄色的返回图标,也变为下方箭头,此时再滚动窗口,不会变为导航栏. 点击下方箭头 ...
前端 vue 自定义导航栏组件高度及返回箭头自定义 tabbar 图标
前端vue自定义导航栏组件高度及返回箭头自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12986 喜 ...
Vue分页页码栏设计
Vue分页页码栏设计效果展示 HTML 数据需要函数需要运用效果展示 HTML <div class="page_bar no-select"><ul c ...
vue路由导航守卫控制访问权限
利用路由的全局前置守卫beforeEach来控制用户的访问权限. 首先是一个登录的页面用户输入完整的信息,点击登录时,会本地存储用户的登录状态,如果在本地存储中存在用户登录过的痕迹,用户可以直接进入 ...

html5导航栏点击之后变色,vue实现导航栏点击当前标题变色

html5导航栏点击之后变色,vue实现导航栏点击当前标题变色相关推荐

最新文章

热门文章