avalon结合原生js tab切换
<div class="fishqc-tap">
<div ms-class="[@codePic!=''&&@codeInfo!=''?'tapHome':'changeToThree']">
<a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'safety' && 'active'" ms-click="sortclick(@setting.safety)">安全榜单</a>
</div>
<div ms-class="[@codePic!=''&&@codeInfo!=''?'tapHome':'changeToThree']">
<a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'recommend' && 'active'" ms-click="sortclick(@setting.recommend)">优品推荐</a>
</div>
<!-- <a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'report' && 'active'" ms-click="sortclick(@setting.report)">即将上线</a> -->
<div ms-visible="@codePic!=''&&@codeInfo!=''" class="tapHome">
<a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'secret' && 'active'" ms-click="sortclick(@setting.secret)">中选秘籍</a>
</div>
<!-- <a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'beforetry' && 'active'" ms-click="sortclick(@setting.beforetry)">试用报告</a> -->
<div ms-class="[@codePic!=''&&@codeInfo!=''?'tapHome':'changeToThree']">
<a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'report' && 'active'" ms-click="sortclick(@setting.report)">试用报告</a>
</div>
</div>
<div ms-if="@currentSelect.key == 'safety'">
11111
</div> <!-- </div> -->
<div ms-if="@currentSelect.key == 'recommend'">
222222
</div>
<div class="award_bottom" ms-if="@currentSelect.key == 'secret'">
3333
</div>
<div ms-if="@currentSelect.key == 'report'" style="margin-top: 0.2rem;border-bottom: 1px solid #f8f8f8">
44444
</div>
setting: {
safety: {
key: "safety"
},
recommend: {
key: "recommend"
},
secret: {
key: "secret"
},
report: {
key: "report"
}
},
sortclick: function(item) {
vm.currentSelect = item
if (item.key == 'safety') {
vm.safetyList()
} else if (item.key == 'recommend') {
vm.productRecommend()
} else if (item.key == 'report') {
vm.tryReport()
}
console.log(, item)
},
vm.$watch('onReady', function() {
vmi.currentSelect = vmi.setting.currenttry; })
avalon结合原生js tab切换的更多相关文章
- js Tab切换实例
js 实现 tab 切换 实现如下效果: 1.图片每1秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击切换页的选项上时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应 ...
- 原生 js 左右切换轮播图
使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...
- 原生js tab 栏切换
<div id="box"> <div> <button>按钮1</button> <button>按钮2</bu ...
- 【原生JS】切换选项卡
效果图: HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- JS tab切换事件
$('ul.main-tab>li').on('mousedown', data, function() { var $this = $(this), $box = $('.main-tab-c ...
- JS——tab切换
排它思想: 1.先让所有的元素恢复默认值 2.再让选中的元素赋专有的值 3.干掉所有人,剩下我一个 <!DOCTYPE html> <html> <head lang=& ...
- 标签页(tab)切换的原生js,jquery和bootstrap实现
概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...
- 原生js实现tab切换
//通过原生js实现table切换<html><head><meta http-equiv="Content-Type" content=" ...
- 原生JS实现tab切换--web前端开发
tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果.例如:https://123.sogou.com/中的一个tab部分: 1.案例源代码 <!DOCTYPE ht ...
随机推荐
- Unity3d与iOS交互开发
一.Unity3d To iOS: 最近要做一个商品和人体模型T台秀相关的功能,要用到Unity3D,搜集了一些资料先保存下来. 1.创建一个C#文件 SdkToIOS.cs 这是调用iOS函数的 ...
- scrapy 用pycharm调试
1. 用pycharm打开scrapy项目,随便右击一个.py文件,选择Debug "***" 2. pycharm 右上角点击刚才debug的文件,选择Edit Configur ...
- python代码组织及模块使用
python代码组织 python和其他编程语言一样,采用包管理代码,一个包中可包含许多模块. 使用模块最大的好处是大大提高了代码的可维护性.其次,编写代码不必从零开始.当一个模块编写完毕,就可以被其 ...
- [bluez] linux下蓝牙鼠标的延迟问题
引言 现在的便携设备,接口越来越少了.所以我们没有理由不用蓝牙鼠标.高大上也不贵. 蓝牙4.0之前,蓝牙设备的问题是特别费电.蓝牙4.0之后省电的要命,我的上一个鼠标Microsoft Designe ...
- git 常见的命令和错误
- Integer Inquiry UVA-424(大整数)
题意分析: 将字符串倒着存入int数组中,每次加完后再取余除去大于10的部分 关键:倒着存入,这样会明显缩短代码量. #include<iostream> #include<cstd ...
- maven报错找不到依赖
遇到一个巨坑 跑公司的一个项目,拉下来代码,跑不起来.发现maven一直报这个错 was cached in the local repository,resolution will not be r ...
- opencv摄像头读取图片
# 摄像头捕获图像或视频import numpy as np import cv2 # 创建相机的对象 cap = cv2.VideoCapture(0) while(True): # 读取相机所拍到 ...
- bcb中TParamter传NULL值
if (status_Desc.IsEmpty()) Queue_Status->Value = Null(); else Queue_Status->Value = status_Des ...
- (java)selenium webdriver学习---三种等待时间方法:显式等待,隐式等待,强制等待
selenium webdriver学习---三种等待时间方法:显式等待,隐式等待,强制等待 本例包括窗口最大化,刷新,切换到指定窗口,后退,前进,获取当前窗口url等操作: import java. ...