原生js tab 栏切换
<div id="box">
<div>
<button>按钮1</button>
<button>按钮2</button>
</div>
<div>
<div>内容1</div>
<div>内容1</div>
<div>
<div>
var btns = docuemnt.getElemetsByTagName("button");
var divs = document.getElementsByClassName("con");
for(var i =0; i < btns.length; i ++){
btn[i].index = i;//为每个按钮添加一个特有的标记
bth[i].onclick = functoin (){
//排他思想
for(var i =0; i<btn.length; i ++){
btn[i].className = " ";
divs[i].style.display = "none";
}
this.calssName = "current";//this指的是点击对象
divs[this.index].style.display = "block";
}
}
原生js tab 栏切换的更多相关文章
- js tab栏切换
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- JS实现 Tab栏切换案例
要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...
- jQuery带有定时器的tab栏切换
现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...
- tab栏切换制作
tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...
- dataTable tab栏切换时错位解决办法
做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...
- tab栏切换
最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...
- ES6面向对象实现tab栏切换效果
面向对象实现tab栏切换效果
- [javascript]switchTab:仿腾讯首页Tab栏切换js插件
腾讯首页的每个新闻栏目都是一个tab选项卡切换,属于延迟动作的:鼠标hover上去之后200毫秒才会切换,防止了因为浏览滑动导致的页面上选项卡的频繁切换.仿照这样的效果,自己写了一个js插件,实现了低 ...
- JS高级——面向对象方式解决tab栏切换问题
注意事项 1.给li元素注册事件,函数里面的this指的li元素,那么我们可以在注册事件之前将Tab对象用that=this进行保存 2.使用沙箱模式,所以暴露给外面的变量使用的是window.tab ...
随机推荐
- Python 的 pyinotify 模块 监控文件夹和文件的变动
官方参考: https://github.com/seb-m/pyinotify/wiki/Events-types https://github.com/seb-m/pyinotify/wiki/I ...
- 观点:BPM已经过时了?
在这个信息爆炸的世界,业务转型通常是以数字系统和流程的方式发生. 根据Forrester的报告“软件必须丰富你的品牌”,人们要依靠这些技术实现期望的商业成果,比如品牌联系.客户服务创新.更好的产品和提 ...
- AngularJS的学习笔记(一)
声明:单纯作为我自己的学习笔记,纯是为了自己学习,上面的话都是从各处粘贴,如有冒犯,请原谅我这个小菜鸟~ AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷. 使用双大括 ...
- 工作偶遇小bug
1.下面这个在,调试一个单片机定时器是遇到的,整了一上午才找到,晕! 编译器是不认为它是错误的,所以,就你怎么运行都不是你想要结果。 2.使用pic单片机过程中,使用AD口时,相应端口的方向必须设为输 ...
- 设置Windows 7 防火墙端口规则
http://jingyan.baidu.com/article/c843ea0b7d5c7177931e4ab1.html?qq-pf-to=pcqq.c2c 主要解决手机访问pc站点的问题(pc和 ...
- oracle分析函数与over()(转)
文章参考:http://blog.csdn.net/haiross/article/details/15336313 -- Oracle分析函数入门-- 分析函数是什么? 分析函数是Oracle专门用 ...
- DOM4J的使用
http://blog.csdn.net/redarmy_chen/article/details/12969219 http://blog.csdn.net/wlbing0625/article/d ...
- mySql的学习心得
不知不觉又到晚上了,总感觉每天的时间有些不过用,总感觉每天都有学不完的东西.但是,让我欣慰的是,还是颇有收获的.今天学习了另一个数据库mysql5的相关知识,下面是有关学习内容(php文件): < ...
- Hadoop的数据输入的源码解析
我们知道,任何一个工程项目,最重要的是三个部分:输入,中间处理,输出.今天我们来深入的了解一下我们熟知的Hadoop系统中,输入是如何输入的? 在hadoop中,输入数据都是通过对应的InputFor ...
- matlab初学之strcat、num2str
文章出处: http://blog.sina.com.cn/s/blog_6fb8aa0d01019id5.html http://wenda.so.com/q/1439143662729624 ht ...