模仿JQ的UI-TAB控件,兼容多浏览器
- 作者：omeweb 来源：蓝色理想 文章点击数：
<!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>
<link rel="stylesheet" href="ui.tabs.css" type="text/css" media="print, projection, screen">
<title>Simple Tabs</title>
<style>
* { font-size:14px;}
h2{font-size:24px;}
.highlight {background-color:#FFFF00;}
.note{color:#FF0000; font-weight:bold;}
div .ui-tabs-panel{border:1px solid #97a5b0;}
</style>
</head>
<body>
<h2>Simple Tabs</h2>
<div id="container-1">
<ul class="ui-tabs-nav">
<li class="ui-tabs-selected"><a href="#fragment-1"><span>One</span></a></li>
<li class=""><a href="#fragment-2"><span>Two</span></a></li>
<li class=""><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div style="display: block; " class="ui-tabs-panel ui-tabs-hide" id="fragment-1">
<p>First tab</p>
</div>
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-2">
<p>Second tab</p>
</div>
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-3">
<p>Third tab</p>
</div>
</div>
<h2>使用说明</h2>
<div id="Div1">
<ul class="ui-tabs-nav">
<li class="ui-tabs-selected"><a href="#Div2"><span>高度封装</span></a></li>
<li class=""><a href="#Div3"><span>使用简单</span></a></li>
<li class=""><a href="#Div4"><span>兼容性好</span></a></li>
<li class=""><a href="#Div5"><span>刷新保持</span></a></li>
<li class=""><a href="#Div6"><span>程序控制</span></a></li>
<li class=""><a href="#Div7"><span>结构简单</span></a></li>
</ul>
<div style="display: block;" class="ui-tabs-panel ui-tabs-hide" id="Div2">
结构比较简单，已经封装,<span class="note">本作品为 橘子香水 原创，其中样式借用了jquery的ui-tab的样式，JS部分getElementsByClassName是来自网络，其他均为自己写的，程序还可以被扩展，也可能有bug，欢迎指正：QQ 61632273 ，MSN omeweb(at)hotmail.com。</span>
</div>
<div class="ui-tabs-panel ui-tabs-hide" id="Div3">
使用简单，两行代码 :var s=new UI_TAB();s.init("container-1");//init方法的参数就是tab的外围DIV的ID,而且，一页可以多用
</div>
<div class="ui-tabs-panel ui-tabs-hide" id="Div4">
兼容IE6，7，8（样式有一点问题）,FF1.5，FF3.0
</div>
<div class="ui-tabs-panel ui-tabs-hide" id="Div5">
刷新页面后仍然可以保持被激活的选项卡
</div>
<div class="ui-tabs-panel ui-tabs-hide" id="Div6">
要用程序激活指定的tab，只需要：s2.activeIndex(1)；//其中s2是实例名，后面的1是从0开始的序号，这里有一个例子：<a href="" onclick="s2.activeIndex(1); return false;">点这里激活第二个TAB的第二个</a>
</div>
<div class="ui-tabs-panel ui-tabs-hide" id="Div7"><pre style="margin:0; padding:0;">
<div id="container-1"><span class="note"><!--使用时： var s=new UI_TAB();s.init("container-1");--></span>
<ul class="ui-tabs-nav">
<li class="<span class="highlight">ui-tabs-selected</span>"><a href="<span class="highlight">#fragment-1</span>"><span><span class="highlight">One</span></span></a></li>
<li class=""><a href="#fragment-2"><span>Two</span></a></li>
<li class=""><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<span class="note"><!--上面的导航项目全放在class为的UL下面的LI下,高亮部分依次是默认显示的项目，显示内容的id，选项卡的标题--></span>
<div style="<span class="highlight">display: block;</span>" class="<span class="highlight">ui-tabs-panel ui-tabs-hide</span>" id="<span class="highlight">fragment-1</span>">
<p>First tab</p>
</div>
<span class="note"><!--上面的结构就是内容的结构，高亮部分依次是默认显示的内容，每一个内容都要有的class，以及和选项卡对应的ID--></span>
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-2">
<p>Second tab</p>
</div>
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-3">
<p>Third tab</p>
</div>
</div>
</pre>
</div>
</div>
<script>
document.getElementsByClassName = function(className,oBox)
{
//适用于获取某个HTML区块内部含有某一特定className的所有HTML元素
this.d= oBox || document;
var children = this.d.getElementsByTagName('*') || document.all;
var elements = new Array();
for (var ii = 0; ii < children.length; ii++) {
var child = children[ii];
if(child.className==className)
{
elements.push(child);
continue;
}
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j++)
{
if (classNames[j] == className)
{
elements.push(child);
continue;
}
}
}
return elements;
}
document.getElementsByType = function(sTypeValue,oBox)
{
//适用于获取某个HTML区块内部同属于某一特定type的所有HTML元素，如:input,script,link等等
this.d= oBox || document;
var children = this.d.getElementsByTagName('*') || document.all;
var elements = new Array();
for (var ii = 0; ii < children.length; ii++) {
if (children[ii].type == sTypeValue) {
elements.push(children[ii]);
}
}
return elements;
}
function $F()
{
var elements = new Array();
for (var ii = 0; ii < arguments.length; ii++)
{
var element = arguments[ii];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
$Cls = function (s,o){
return document.getElementsByClassName(s,o);
};
$Type = function (s,o){
return document.getElementsByType(s,o);
};
$Tag = function (s,o){
this.d=o || document;
return this.d.getElementsByTagName(s);
};
function UI_TAB()
{
var id="";
var arr=[];
var panelList=[];
this.init=function(id)
{
id=id;//alert(id);
arr=$Tag("LI",
$Cls("ui-tabs-nav",$F(id))[0]
);
panelList=$Cls("ui-tabs-panel ui-tabs-hide",$F(id));
/******************注册tab的事件*/
for(var i=0;i<arr.length;i++)
arr[i].onclick=function(){
activeLI(this);
};
/******************刷新后保持状态*/
//alert(location.hash);
var defaultID=location.hash.replace(/#/gi,"");//alert(defaultID);
var defaultIndex=-1;
if(defaultID!=null && defaultID!="")
{
for (var x=0; x< panelList.length;x++)
{
if(panelList[x].id==defaultID)
{
defaultIndex=x;
break;
}
}
}
//alert(defaultIndex);
if(defaultIndex!=-1)
{active(defaultIndex);}
}
/******************激活*/
function active(i)
{
activeLI(arr[i]);
}
function activeLI(LI)
{
//alert(LI.className);return;//没有使用LI.getAttribute("Class");问题是在IE7里得不到值
if(LI.className=="ui-tabs-selected")
{return;}
else
{
var a=$Tag("a",LI)[0];//alert(a.href);
var str=a.href;
var temp_arr=str.split("#");
var _id=temp_arr[temp_arr.length-1];//alert(_id);
for ( var j=0 ;j<arr.length;j++ ) //用for in 无法修改classname，因为for in 是只读的
arr[j].className="";
LI.className="ui-tabs-selected";//设置当前的为激活状态
//设置所有的ID隐藏
//alert(id);//alert(panelList.length);
for(j=0;j<panelList.length;j++)
panelList[j].style.display="none";
//设置当前的id为show
$F(_id).style.display="block";
}
}
this.activeIndex=function(i)
{
activeLI(arr[i]);
}
return this;
}
//初始化
var s=new UI_TAB();s.init("container-1");
//s.activeIndex(2);
var s2=new UI_TAB();
s2.init("Div1");
</script>
</body>
</html>
- 相关文章
| ·仿windows选项卡效果拾零 | 07-15 |
| ·符合Firefox的,以图片代替滚动条效果 | 07-14 |
| ·一个背景变暗的div可拖动提示窗口，兼容IE、Firefox、 | 07-11 |
| ·非常不错的一个DIV+CSS客齐集的导航特效 | 07-10 |
| ·非常经典的不用图片实现圆角代码 | 07-09 |
| ·如何实现浏览器上的右键菜单 | 07-08 |
| ·网页中实用的中英文日历网页特效代码 | 07-07 |
| ·强制访问你的广告 | 07-05 |
