这js很好用,体积只有2k,非常小,但缺点是必须tab使用a驱动,我想自定义tag属性,如使用li,span来驱动。
太原生的代码我改不动,希望高手能帮忙改一下。官方demo
我的demo我的demo代码<script type="text/javascript" src="nanotabs.js"></script>
<script type="text/javascript">
function tabs(){
nanotabs({c:"tabs",e:"mouseover",s:"active"});
nanotabs({c:"tabs_2",e:"mouseover",s:"active",tag:"li"});
}
window.onload=function(){
tabs();
}
</script>
<style type="text/css">
.active{color:red}
</style><div id="tabs">
<a href="#x1">tab1</a>
<a href="#x2">tab1</a>
<a href="#x3">tab1</a>
<div id="x1">11111</div>
<div id="x2">22222</div>
<div id="x3">33333</div>
</div><div id="tabs_2">
<ul>
<li title="#y1">li_tab</li>
<li title="#y2">li_tab</li>
<li title="#y3">li_tab</li>
</ul>
<div id="y1">11111</div>
<div id="y2">22222</div>
<div id="y3">33333</div>
</div>
nanotabs.js代码:/* nanotabs ~ Sean Catchpole - Version 0.9 - MIT/GPL */
(function(){ var gc = function(s){ return document.getElementsByClassName(s); };
if(!document.getElementsByClassName) {
var all = document.getElementsByTagName('*');
gc = function(c){
var e=[]; c=' '+c+' ';
for(var i=0; i<all.length; i++)
if((' '+all[i].className+' ').indexOf(c)>=0)
e.push(all[i]);
return e;
}
} var w = function(id){ var d; return (d=document.getElementById(id))&&[d]||gc(id); },
bind = function(f){ var self=this; return function(){ return f.apply(self, arguments); }; },
map = function(f,e,a) { for(var i=0; i<e.length; i++) f.apply(e[i],a||[]); },
add = function(c) { this.className += c; },
remove = function(c) { this.className = this.className.replace(new RegExp("(^|\\s)" + c + "(\\s|$)",'g'),''); } ,
hide = function() { this.style.display="none"; },
show = function() { this.style.display="block"; }; var tab = function(id,a,e,s) {
map(remove,a,[s.s]);
add.call(this,s.s);
map(hide,e);
map(show,w(id));
} nanotabs = function(s){
var i, s=s||{}, o="cesdf".split('');
for(i in o) s[o[i]]=s[o[i]]||nanotabs.settings[o[i]];
var c=w(s.c), f=function(){
var t=this,o=t[0],a=[t[1],t[2],t[3],t[4]];
if( !s.f || s.f.apply(o,a)!==false ) tab.apply(o,a);
return false;
}
for(i=0; i<c.length; i++) {
var x=0, e=[], a=[], h=[], t=c[i].getElementsByTagName("a");
for(var j=0; j<t.length; j++)
if(t[j].href.match(/#/)) {
h.push(t[j].href.split('#')[1]);
if(typeof s.d=="string" && h[x]==s.d) s.d=x;
a.push(t[j]);
var g = w(h[x]);
for(var k=0; k<g.length; k++) e.push(g[k]);
x++;
}
for(var j=0; j<a.length; j++)
a[j]['on'+s.e] = bind.call([a[j],h[j],a,e,s],f);
if(typeof s.d=="number" && s.d>=0) tab.call(a[s.d],h[s.d],a,e,s);
}
} nanotabs.settings = { c:"nanotabs", e:"click", s:"selected", d:0, f:false };
nanotabs();})();
图文说明
太原生的代码我改不动,希望高手能帮忙改一下。官方demo
我的demo我的demo代码<script type="text/javascript" src="nanotabs.js"></script>
<script type="text/javascript">
function tabs(){
nanotabs({c:"tabs",e:"mouseover",s:"active"});
nanotabs({c:"tabs_2",e:"mouseover",s:"active",tag:"li"});
}
window.onload=function(){
tabs();
}
</script>
<style type="text/css">
.active{color:red}
</style><div id="tabs">
<a href="#x1">tab1</a>
<a href="#x2">tab1</a>
<a href="#x3">tab1</a>
<div id="x1">11111</div>
<div id="x2">22222</div>
<div id="x3">33333</div>
</div><div id="tabs_2">
<ul>
<li title="#y1">li_tab</li>
<li title="#y2">li_tab</li>
<li title="#y3">li_tab</li>
</ul>
<div id="y1">11111</div>
<div id="y2">22222</div>
<div id="y3">33333</div>
</div>
nanotabs.js代码:/* nanotabs ~ Sean Catchpole - Version 0.9 - MIT/GPL */
(function(){ var gc = function(s){ return document.getElementsByClassName(s); };
if(!document.getElementsByClassName) {
var all = document.getElementsByTagName('*');
gc = function(c){
var e=[]; c=' '+c+' ';
for(var i=0; i<all.length; i++)
if((' '+all[i].className+' ').indexOf(c)>=0)
e.push(all[i]);
return e;
}
} var w = function(id){ var d; return (d=document.getElementById(id))&&[d]||gc(id); },
bind = function(f){ var self=this; return function(){ return f.apply(self, arguments); }; },
map = function(f,e,a) { for(var i=0; i<e.length; i++) f.apply(e[i],a||[]); },
add = function(c) { this.className += c; },
remove = function(c) { this.className = this.className.replace(new RegExp("(^|\\s)" + c + "(\\s|$)",'g'),''); } ,
hide = function() { this.style.display="none"; },
show = function() { this.style.display="block"; }; var tab = function(id,a,e,s) {
map(remove,a,[s.s]);
add.call(this,s.s);
map(hide,e);
map(show,w(id));
} nanotabs = function(s){
var i, s=s||{}, o="cesdf".split('');
for(i in o) s[o[i]]=s[o[i]]||nanotabs.settings[o[i]];
var c=w(s.c), f=function(){
var t=this,o=t[0],a=[t[1],t[2],t[3],t[4]];
if( !s.f || s.f.apply(o,a)!==false ) tab.apply(o,a);
return false;
}
for(i=0; i<c.length; i++) {
var x=0, e=[], a=[], h=[], t=c[i].getElementsByTagName("a");
for(var j=0; j<t.length; j++)
if(t[j].href.match(/#/)) {
h.push(t[j].href.split('#')[1]);
if(typeof s.d=="string" && h[x]==s.d) s.d=x;
a.push(t[j]);
var g = w(h[x]);
for(var k=0; k<g.length; k++) e.push(g[k]);
x++;
}
for(var j=0; j<a.length; j++)
a[j]['on'+s.e] = bind.call([a[j],h[j],a,e,s],f);
if(typeof s.d=="number" && s.d>=0) tab.call(a[s.d],h[s.d],a,e,s);
}
} nanotabs.settings = { c:"nanotabs", e:"click", s:"selected", d:0, f:false };
nanotabs();})();
图文说明
这里有人帮我改了一下,但不完美,高手完善一下。
http://bbs.phpchina.com/thread-193713-1-1.html
http://blog.csdn.net/theforever/archive/2010/08/23/5832244.aspx