原生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();
};

时间: 2024-10-06 15:08:14

原生javascript 改写的tab选项卡的相关文章

原生JS画的tab选项卡

记录一下原生js写的tab选项卡 鼠标滑入可以切换图片 离开之后自动切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-

原生javascript写的网页选项卡和jQuery写的比较

总的来说思路比较简单,就是先获取节点,然后对节点进行相应的处理,下面是完整的页面代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>原生js tab</title>

javascript控制制作tab选项卡(兼容ie6,FF,chrome等)

今天分享一个javascript制作选项卡的代码.所以自己尝试做了,以前一般都是用CSS做的,现在用js做,虽然很简单,不过要考虑到它的可维护性和可重复性,扩展性就要多考虑一些东西了.   下面是我写的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

原生js实现tab选项卡里内嵌图片滚动特效代码

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>原生js实现tab选项卡里内嵌图片滚动特效代码</title><meta name="keywords" content="原生js实现tab选项卡里内嵌图片滚动特效代码" /><meta name=&

原生javascript实现Tab切换

tab切换在各大主流页面有广泛的应用,今天来分享一个用原生javascript来实现类似京东购物边栏的TAB.对于正在使用web前端开发(http://www.maiziedu.com/course/web/)网站的朋友,是非常有用的哦. 首先以下是一段边栏HTML框架代码 <body> <div class="wrap"> <div id="left"> <ul id="leftList"> &l

javascript 一个页面多个tab选项卡效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>javascript 一个页面多个tab选项卡效果</title> <script> var tab=function(id,event){ var oDiv=document.getElementById(id); var oBtn=oDiv.getElementsByTagName(

tab选项卡代码(原生js)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab选项卡一练习</title> <style> *{ margin: 0px; padding: 0px; } #tab{ width: 400px; height: 250px; margin: 20px auto; position: rel

可编辑tab选项卡

效果如图所示,基于jq开发的,用原生可能会麻烦点.所以我没写. <!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> &l

Javascript实现简单的选项卡

在线演示:http://jsfiddle.net/Web_Code/TbPDd/embedded/result/ <!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&