html5代碼：
<!doctype html>
<html lang="en">
<!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 charset="UTF-8">
<title>轉賬二維碼支付</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<style>
html,body{ background: #fff;}
*{margin:0px; padding: 0px; list-style: none;font-family:"Microsoft YaHei"}
.tabs{ margin-top:5px;text-align:center;}
.tabs a{ padding:10px; cursor:pointer;}
.tabs .cur{ color:#339966;}
</style>
<body>
<div class="STYLE3">
<center><h2>轉賬二維碼支付</h2></center>
</div>
<div class="tabs" id="tabs">
<a class="cur t">QQ錢包</a>
<a class="t">微信錢包</a>
<a class="t">支付寶</a>
</div>
<div class="conetnt" style="text-align: center; margin-top:5px;">
<div style="text-align: center;" class="QRcode tabslist" id="tabslist">
<img src="images/qianbao.png" alt="QQ錢包" width="800" height="770" style="" class="img" />
<img src="images/weixin.png" alt="微信轉賬" width="800" height="770" style="display:none;" class="img" />
<img src="images/zhifubao.png" alt="支付寶" width="800" height="770" style="display:none;" class="img" />
</div>
</div>
</body>
傳統方式，是直接寫個函數一個參數為對象，代碼如下：
<script>
function getChilds(parent,clas){//獲取子元素
var objs=new Array();
if(parent){
var childs=new Array();
if(typeof(clas)!="undefined"){
if(clas.indexOf(".")!=-1){
childs=parent.getElementsByTagName("*");
var clas1=clas.replace(".","");
for(var i=0;i<childs.length;i++){
var obj=childs[i];
if(typeof(obj.className)!="undefined"){
var arr=obj.className.split(" ");
for(var j=0;j<arr.length;j++){
if(arr[j]==clas1){//如存在class
objs.push(obj);
break;
}
}
}
}
}else{
objs=parent.getElementsByTagName(clas);//按標簽獲取
}
}else{
childs=parent.childNodes;
for(var i=0;i<childs.length;i++){
var obj=childs[i];
if(obj.nodeName!="#text"){//排除空元素
// console.log(i,obj);輸出來瀏覽器f12控制面板console面板來
objs.push(obj);
}
}
}
};
return objs;
}
function hasClass(obj,clas){
if(typeof(obj.className)!="undefined"){
var arr=obj.className.split(" ");
for(var j=0;j<arr.length;j++){
if(arr[j]==clas){
return true;
break;
}
}
};
return false;
};
function removeClass(obj,clas){//移除樣式類
if(typeof(obj.className)!="undefined"){
var newclass="";
var arr=obj.className.split(" ");
for(var j=0;j<arr.length;j++){
if(arr[j]!=clas){
if(newclass!=""){
newclass+=" "+arr[j];
}else{
newclass=arr[j];
}
}
};
obj.className=newclass;
}
};
function addClass(obj,clas){//添加樣式類
if(typeof(obj.className)!="undefined"){
if(!hasClass(obj,clas)){
obj.className=obj.className+" "+clas;
}
}else{
obj.className=clas;
}
}
</script>
<script>
var tablis=getChilds(document.getElementById("tabs"));//獲取切換按鈕元素對象集合
var tabimgs=getChilds(document.getElementById("tabslist"));//獲取切換顯示的元素對象集合
for(var i=0;i<tablis.length;i++){
(function(y){
tablis[y].onclick=function(){
for(var i=0;i<tablis.length;i++){
removeClass(tablis[i],"cur");
if(typeof(tabimgs[i])!="undefined"){
tabimgs[i].style.display="none";
}
}
addClass(tablis[y],"cur");
if(typeof(tabimgs[y])!="undefined"){
tabimgs[y].style.display="";
}
}
})(i);
}
</script>
另一種則是給html 元素全局大類注冊自定義的函數，這樣子就可以直接.出來的，注意ie 6 ,ie 7需要做相應的兼容，代碼如下
<script>
//所有的html元素 都是屬于Element類,所以給Element注冊我們自己定義的相關函數
//兼容性
if(window.HTMLElement){
window.Element=window.HTMLElement;
}else if(window.Element){
window.Element=window.Element;
}else{
window.Element =function(){};
window.isie67=true;
// alert(window.Element.isie6());
}
Element.prototype.getChilds=function(clas){//按類名獲取子元素
var objs=new Array();
if(this){
var childs=new Array();
if(typeof(clas)!="undefined"){
if(clas.indexOf(".")!=-1){
childs=this.getElementsByTagName("*");
var clas1=clas.replace(".","");
for(var i=0;i<childs.length;i++){
var obj=childs[i];
if(typeof(obj.className)!="undefined"){
var arr=obj.className.split(" ");
for(var j=0;j<arr.length;j++){
if(arr[j]==clas1){//如存在class
objs.push(obj);
break;
}
}
}
}
}else{
objs=this.getElementsByTagName(clas);//按標簽獲取
}
}else{
childs=this.childNodes;
for(var i=0;i<childs.length;i++){
var obj=childs[i];
if(obj.nodeName!="#text"){//排除空元素
// console.log(i,obj);輸出來瀏覽器f12控制面板console面板來
objs.push(obj);
}
}
}
}
if(typeof(window.isie67)!="undefined"){//兼容處理ie 6 ie 7 把我們自定義的屬性方法給注冊一下
for(var k in objs){
for(var key in window.Element.prototype){
objs[k][key] = window.Element.prototype[key];
}
}
}
return objs;
}
Element.prototype.removeClass=function(clas){//移除樣式類
if(typeof(this.className)!="undefined"){
var newclass="";
var arr=this.className.split(" ");
for(var j=0;j<arr.length;j++){
if(arr[j]!=clas){
if(newclass!=""){
newclass+=" "+arr[j];
}else{
newclass=arr[j];
}
}
}
this.className=newclass
}
}
Element.prototype.hasClass=function(clas){//判斷樣式類是否存在
if(typeof(this.className)!="undefined"){
var arr=this.className.split(" ");
for(var j=0;j<arr.length;j++){
if(arr[j]==clas){
return true;
break;
}
}
}
return false;
}
Element.prototype.addClass=function(clas){ //添加樣式類
if(typeof(this.className)!="undefined"){
if(!this.hasClass(clas)){
this.className=this.className+" "+clas;
}
}else{
this.className=clas;
}
}
if(typeof(window.isie67)!="undefined"){//兼容處理ie 6 ie 7 不然無法直接調用 .addClass .hasClass .removeClass
//解決辦法來自:https://www.e-learn.cn/content/wangluowenzhang/205066
//其它：https://www.cnblogs.com/dojo-lzz/p/3731245.html
var __createElement = document.createElement;
document.createElement = function(tagName)
{
var element = __createElement(tagName);
for(var key in window.Element.prototype)
element[key] = window.Element.prototype[key];
return element;
}
var __getElementById = document.getElementById
document.getElementById = function(id)
{
var element = __getElementById(id);
for(var key in window.Element.prototype)
element[key] = window.Element.prototype[key];
return element;
}
var __getElementsByTagName = document.getElementsByTagName
document.getElementsByTagName = function(id)
{
var element = __getElementsByTagName(id);
for(var key in window.Element.prototype)
element[key] = window.Element.prototype[key];
return element;
}
}
var tablis=getChilds(document.getElementById("tabs"));
var tabimgs=getChilds(document.getElementById("tabslist"));
for(var i=0;i<tablis.length;i++){
(function(y){
tablis[y].onclick=function(){
for(var i=0;i<tablis.length;i++){
tablis[i].removeClass("cur");//區別就是可以這樣子直接調用
if(typeof(tabimgs[i])!="undefined"){
tabimgs[i].style.display="none";
}
}
tablis[i].addClass("cur");
if(typeof(tabimgs[y])!="undefined"){
tabimgs[y].style.display="";
}
}
})(i);
}
</script>