当前位置：移动技术网 > IT编程>开发语言>JavaScript > 一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera

一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera

2019年08月01日 | 移动技术网IT编程 | 我要评论

如果是感应触发.就选onmouseover
如果是点击触发.就选onclick [把它们两互相替换,就可随时变为感应或点击了]

而如果想在一个页面上有n个滑动门
就复制一套...将mytab0改成mytab1 mytab2 mytab3 等等等..都可以..或者换成你自己喜欢的名字...当然mytab0_content0这个亦是要随着变动!

保留自己用

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<title>我的滑动门</title> 
<style type="text/css"> 
body{ 
color: #000; 
font-family: "宋体", arial; 
font-size: 12px; 
background: #fff; 
text-align: center; 
margin: 0; 
} 
.ntab{ 
float: left; 
width: 960px; 
margin: 0 auto; 
border-bottom:1px #aaccee solid; 
background:#d5d5d5; 
background-position:left; 
background-repeat:repeat-y; 
margin-bottom:2px; 
} 
.ntab .tabtitle{ 
clear: both; 
height: 22px; 
overflow: hidden; 
} 
.ntab .tabtitle ul{ 
border:0; 
margin:0; 
padding:0; 
} 
.ntab .tabtitle li{ 
float: left; 
width: 70px; 
cursor: pointer; 
padding-top: 4px; 
padding-right: 0px; 
padding-left: 0px; 
padding-bottom: 2px; 
list-style-type: none; 
} 
.ntab .tabtitle .active{background:#fff;border-left:1px #aaccee solid;border-top:1px #aaccee solid;border-right:1px #aaccee solid;border-bottom:1px #fff solid;} 
.ntab .tabtitle .normal{background:#ebf3fb;border:1px #aaccee solid;} 
.ntab .tabcontent{ 
width:auto;background:#fff; 
margin: 0px auto; 
padding:10px 0 0 0; 
border-right:1px #aaccee solid;border-left:1px #aaccee solid; 
} 
.none {display:none;}

</style>

</head> 
<body>

</body> 
</html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

Android 入门第七讲01-数据存储（数据存储概述，文件存储（raw和asserts目录读写，data/data/包名目录读写，sdcard目录读写），SharedPreferences读写）

Android 入门第七讲01-数据存储1.数据存储概述Android 入门第六讲05-JSON解析第三方框架G... [阅读全文]
荐 Android总结（基础篇）-骚人文客

目录Android总结Android四大组件Activity生命周期添加网络权限Intent Bundle--回... [阅读全文]
原生js实现上拉加载

地址列表组件没有无法使用上拉加载，所以原生js实现给列表部分注册touchmove事件，监听用户滑动屏幕判断滚动... [阅读全文]
vue-axios系列:axios拦截器，配置请求头，配置请求参数

这里写目录标题axios拦截器配置请求头在这里插入图片描述拦截器添加参数-方法1拦截器添加参数-方法2axios... [阅读全文]
iOS今日头条第3轮面试回忆

今日头条的iOS高级开发岗第三面，下面记录这次面试的回忆以作日后复习。一、自我介绍简单介绍一下你自己吧解析：简单... [阅读全文]
Vuejs 针对安卓低版本、ios9.x 不兼容 ES6语法导致失效解决方法

Vuejs 针对安卓低版本、ios9.x 不兼容 ES6语法导致失效解决方法解决方法：ES6转ES5cd... [阅读全文]
(axios)axios-1

最简单的axios用法main.jsimport axios from 'axios'axios({ url:... [阅读全文]
常用三方库清单列表，方便快速查找

名称描述github链接ImmersionBar沉浸式状态栏解决方案https://github.com/gyf... [阅读全文]
Vue router路由引用以及Tba切换

【1】Vue router1、安装：npm install vue-router或cnpm install vu... [阅读全文]
js如何通过链接下载一个视频（备忘）

downloadFile(fileurl, filename) {let _that = this;this.$... [阅读全文]

网友评论


验证码：

一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera

2019年08月01日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论