原生javascript 选项卡封装

window.onload=function(){
  var aBtn=document.getElementsByTagName(‘input‘);
  var aDiv=document.getElementsByTagName(‘div‘);

  function tab(btn,content)
  {
    for(var i=0; i<btn.length; i++)
    {
      (function(index)
      {
        btn[index].onclick=function()
        {

          for(var i=0; i<btn.length; i++)
          {
            btn[i].className=‘‘;
            content[i].className=‘‘;
          }
          btn[index].className=‘show‘;
          content[index].className=‘show‘;
        };
      })(i);
  }  
};

tab(aBtn,aDiv);

}

时间: 2024-11-09 01:21:16

原生javascript 选项卡封装的相关文章

2、.net NVelocity中原生javascript ajax封装使用

在页面上,我们经常会遇到局部刷新的例子,这个时候,就需要用到ajax, 因为很多代码都是公用的,所以我们想到了,将代码封装,简化了使用,减少了冗余 javascript ajax代码如下: var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性 xmlhttp.open("POST", "AJ

原生JavaScript 封装ajax

原生JavaScript 封装ajax   function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type||"get",//获取用户输入的传输方法,可选,不写为get data:options.data||"",//获取用户输入的数据 dataType:options.dataType||"",//获取用户输入的数据类型比如json 或者xml url

原生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如何读写css样式?

一说起操作css样式很多人都会想到jQuery的css方法: $(selector).css(name) ,但是有思考过如何使用原生javascript来实现类似的功能么?本文和大家分享的就是使用原生javascript实现css样式相关内容,一起来看看吧,希望对大家学习javascript有所帮助. 大家最熟悉的原生js操作样式的方法非DOM中的Style对象莫属了,但是这个方法只能获取和修改html文档中的内联样式,无法操作非内联样式(内部样式和外部样式表).我通过搜索和整理,总结了使用原生

为什么原生 JavaScript 开发越来越多受欢迎?是否应该跟风用原生JavaScript代替 jQuery等库?

本文标签:  jQuery的作用 原生JavaScript优势 jQuery官网 jQuery处理DOM和跨浏览器 JavaScript新特性 互联网杂谈 随着 JavaScript 本身的完善,越来越多的人开始喜欢使用原生 JavaScript 开发代替各种库,其中不少人发出了用原生 JavaScript 代替 jQuery 的声音.这并不是什么坏事,但也不见得就是好事.如果你真的想把 jQuery从前端依赖库中移除掉,我建议你慎重考虑. 首先 jQuery 是一个第三方库.库存在的价值之一在

原生javascript兼容性问题

1.获取样式表里面的width,border color 之类的css(不是行间) 主要是IE6-7支持currentStyle,标准浏览器支持getComputedStyle; 实例:封装函数 复制代码代码如下: function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ return getComputedStyle(obj,false)[name]; } } 调用:get

原生ajax与封装的ajax使用方法

当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口. 1.模拟后端接口可参考http://www.cnblogs.com/heyujun-/p/6793900.html网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('path'

抛弃jQuery,拥抱原生JavaScript

前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少.因此我们项目组在双十一后抽了一周时间,把所有代码中的 jQuery 移除.下面总结一下: Why not jQuery 1. 模式变革 jQuery 代表着传统的以 DOM 为中心的开发模式,但现在复杂页面开发流行的是以 React 为代表

为什么要用原生 JavaScript 代替 jQuery?

随着 JavaScript 本身的完善,越来越多的人开始喜欢使用原生 JavaScript 开发代替各种库,其中不少人发出了用原生 JavaScript 代替 jQuery 的声音.这并不是什么坏事,但也不见得就是好事.如果你真的想把 jQuery 从前端依赖库中移除掉,我建议你慎重考虑. 首先 jQuery 是一个第三方库.库存在的价值之一在于它能极大地简化开发.一般情况下,第三方库都是由原生语言特性和基础 API 库实现的.因此,理论上来说,任何库第三方库都是可以用原生语言特性代替的,问题在