原生javascript 改写的tab选项卡
<!--css部分-->
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none
}
.tabbox{
width: 600px;
clear: both;
overflow: hidden;
margin: 0 auto;
border: 1px solid #ccc;
}
ul.tabnav{
width: 600px;
height: 30px;
border-bottom: 1px solid #ccc;
}
ul.tabnav li{
width: 198px;
height: 30px;
line-height: 30px;
float: left;
border-right: 1px solid #ccc;
text-align: center;
}
ul.tabnav li.active{
color: red;
}
.tabcontent{
width: 460px;
overflow: hidden;;
padding: 20px;
}
.tabcontent ul li{
float: left;
display: none;
}
.tabcontent ul li.active{
display: block;
}
</style>
<!--HTML 结构-->
<div class="tabbox">
<ul class="tabnav" id="tabnav">
<li class="item active">语文</li>
<li class="item">英语</li>
<li class="item">数学</li>
</ul>
<div class="tabcontent" id="tabcont">
<ul>
<li class="item active">语文内容</li>
<li class="item">英语内容</li>
<li class="item">数学内容</li>
</ul>
</div>
</div>
<!--javascript-->
function SwitchTab(tabbtn,tabcontent){
var tabNav = document.getElementById(tabbtn);
var tabcont = document.getElementById(tabcontent);
this.tabNavLi = tabNav.getElementsByTagName('li');
this.tabcontLi = tabcont.getElementsByTagName("li");
var _this = this; //保存创建出来的变量tabs;
for(var i=0, len=this.tabNavLi.length; i<len; i++){
this.tabNavLi[i].index = i;
this.tabNavLi[i].onclick = function (){
_this.tabshow(this); //这里的this 值得是当前点击的选项
};
}
}
SwitchTab.prototype.tabshow = function(obj){ //这里的obj 是当前被点击按钮的那个对象
for(var i=0, len=this.tabNavLi.length; i<len; i++){
this.tabNavLi[i].className = "";
this.tabcontLi[i].className = "";
}
obj.className = "active";
this.tabcontLi[obj.index].className = "active";
};
window.onload = function(){
var tabs = new SwitchTab("tabnav","tabcont");
};
</script>
//改写成面向对象最重要的是要注意this 指的是谁。 出现以下两种情况this的值应该怎么保存呢?
1. 当面向对象程序中有计时器的时候
function Aaa() {
this.a = 10;
var _this = this;
setInterval(function(){
_this.show(); //如果直接使用this,那么这里的this指向的的是window
},1000);
}
Aaa.prototype.show = function(){
alert(this.a);
};
window.onload = function() {
var aaa = new Aaa();
};
2、当面向对象程序中有事件的时候
function Bbb() {
this.a = 10;
var _this = this;
var btn = document.getElementById("btn");
btn.onclick = function() {
_this.show(); //这里的this指向的是当前对象
};
}
Bbb.prototype.show = function(){
alert(this.a);
};
window.onload = function() {
var bbb = new Bbb();
};
原生javascript 改写的tab选项卡的更多相关文章
- JavaScript插件制作-tab选项卡
JavaScript插件制作练习-鼠标划过选项卡切换图片 <!DOCTYPE html> <html> <head> <meta charset=" ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- 原生tab选项卡
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 可轮播滚动的Tab选项卡
前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...
- js基础练习一之tab选项卡
最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...
- tab选项卡-jQuery
上次用原生的js写了个tab选项卡 这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...
- react tab选项卡切换
Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...
- 下拉菜单效果和tab选项卡切换
//下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 原生javascript写自己的运动库(匀速运动篇)
网上有很多JavaScript的运动库,这里和大家分享一下用原生JavaScript一步一步写一个运动函数的过程,如读者有更好的建议欢迎联系作者帮助优化完善代码.这个运动函数完成后,就可以用这个运动函 ...
随机推荐
- 魅蓝Note有几种颜色 魅蓝Note哪个颜色好看
http://www.pc841.com/shoujizhishi/39882.html http://news.mydrivers.com/1/359/359443.htm 魅族发布首款千元高性价比 ...
- 最长回文字符串(manacher算法)
偶然看见了人家的博客发现这么一个问题,研究了一下午, 才发现其中的奥妙.Stupid. 题目描述: 回文串就是一个正读和反读都一样的字符串,比如“level”或者“noon”等等就是回文串. ...
- Hadoop基本概念
一个分布式系统基础架构,由Apache基金会开发.用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力高速运算和存储.Hadoop实现了一个分布式文件系统(Hadoop Dist ...
- 我的Android进阶之旅------>Android安全退出应用程序的几种方式
当应用不再使用时,通常需要关闭应用,可以使用以下几种方法关闭android应用: 第一种方法:首先获取当前进程的id,然后杀死该进程. 建议使用这种方式 android.os.Process.kil ...
- 将apk文件添加到Android模拟器(AVD)中运行
apk不同exe和jar文件,apk需要在安卓系统中运行,单有一个apk文件还是没用,不能直接拖进AVD中(当然可以直接放到安卓系统的手机中) 由于我们的eclipse大都是已经安装好,解压直接使用的 ...
- AnkhSVN 中文版 支持VS2015
简介:AnkhSVN是一款在VS中管理Subversion的插件,您可以在VS中轻松的提交.更新.添加文件,而不用在命令行或资源管理器中提交,而且该插件属于开源项目. 这个版本是简体中文的重新编译版本 ...
- Sass变量、嵌套
声明变量定义变量的语法Sass 的变量包括三个部分: 声明变量的符号“$” 变量名称 赋予变量的值简单的示例,假设你的按钮颜色可以给其声明几个变量: $brand-primary : darken(# ...
- HTML5 格式化、样式、链接、表格
HTML格式化.样式.链接.表格的使用举例
- [转]Swift编程风格指南
语言 使用美式英语拼写以匹配苹果公司的API 优选: var color = "red" 不建议使用: var colour = "red" 间隔 使用2个空格 ...
- Linux中yum手动安装、手动建立仓库文件夹关联实现关联包自动安装、yum相关命令使用
yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指 ...