本想做成一个扩展性好的,结果做来做去总是不理想 , 慢慢来吧 , 先把做好的保存一下 ,
css很粗糙....
<html>
<head>
<title>
</title>
<style type="text/css">
<!--
#TabPage{
position:absolute;
left: 400px;
top: 200px;
height: 400px;
width: 300px;
border-color: blue;
border: solid 1px;
background-color: lightblue;
}
#Tab{
position: absolute;
left:0;
top:0;
width: 100%;
height: 30px;
border-color: red;
border: solid 1px;
font-size: 12px;
color: blue;
}
.subTab{
float: left;
width: 60px;
height:100%;
}
#Page{
position: absolute;
left: 0;
top: 31px;
width: 100%;
border-color: black;
border:solid 1px;
background-color: white;
}
-->
</style>
<script type="text/javascript">
<!--
var str = "";
var zIndex = 0;
var tabpage;
/* function _Tab(tabName){
this.Nodes = [];
this.tabName = tabName;
}
function _Page(pageName){
this.pageName = pageName;
this.Nodes = [];
}*/
function _TabPage(){
//tabpage有两个子数组, 分别标识有几个tab和page,以及其对应关系.根据索引对应.
this.tabs = [];
this.pages = [];
}
function _Tab (id ,title ,url ){
this.id = id;
this.title = title;
this.url = url;
}
function _Page (id , title , tabId){
this.id = id;
this.title = title;
this.tabId = tabId;
}
_TabPage.prototype.add = function(_tab , _page){
if(!_tab || !_page) return;//如果有一个为空 , 就不用做操作了.
//initpage.
var tab = document.createElement("div");
tab.id = _tab.id;
//添加鼠标经过事件 ,
//tab.onmouseover = function (tabId){this.showCurrentPage();};
tab.attachEvent('onmouseover',function(){
var srcE = event.srcElement;
var tabId = srcE.id;
for(var i = 0 ; i < $('Page').childNodes.length ;i++){
$('Page').childNodes[i].style.display = 'none';
}
for(var i = 0 ; i <$('Page').childNodes.length;i++){
if(tabId == $('Page').childNodes[i].tabId){
$('Page').childNodes[i].style.display = 'block';
return;
}
}
}
);
if(_tab.className) tab.className = _tab.className;
else tab.className = 'subTab';
//tab.innerHTML = _tab.url ? '<a href="' + _tab.url + '">' + _tab.title + '</a>' : _tab.title;
tab.innerHTML = _tab.title;
this.tabs[this.tabs.length] = _tab;
document.getElementById('Tab').appendChild(tab);
var page = document.createElement("div");
page.id = _page.id;
page.tabId = _page.tabId;
if(_page.className) page.className = _page.className;
page.innerHTML = _page.title;
page.style.display = 'none';
this.pages[this.pages.length] = page;
document.getElementById('Page').appendChild(page);
this.pages[0].style.display = 'block';
}
function createTabPage(id ,title , url){
var tab = new _Tab(id ,title,url);
//page中的内容应该是一个jsp页面.
var page = new _Page('p1','内容' + (zIndex++) , tab.id);
tabpage.add(tab , page);
}
function page_init(){
tabpage = new _TabPage();
$('Page').style.height = $('TabPage').offsetHeight - $('Tab').offsetHeight;
createTabPage('0','个人信息','./empInfo.do?method=');
createTabPage('1','单位信息','./empInfo.do?method=');
}
function $(id){
return document.getElementById(id);
}
//显示当前tab对应的page
_TabPage.prototype.showCurrentPage=function (tabId){
alert(tabId);
for(var i = 0 ; i < $('Page').childNodes.length ;i++){
$('Page').childNodes[i].style.display = 'none';
alert($('Page').childNodes[i].tabId);
}
for(var i = 0 ; i < $('Page').childNodes.length ;i++){
if(tabId == $('Page').childNodes[i].tabId){
$('Page').childNodes.length = 'block';
return;
}
}
}
window.onload = page_init;
//-->
</script>
</head>
<body >
<div id="TabPage" class="TabPage">
<div id="Tab" class="Tab">
</div>
<div id="Page" class="Page">
</div>
</div>
</body>
</html>
分享到:
相关推荐
javascript实现简易的tab选项卡切换效果
Tab 基于jQuery实现的TAB选项卡,从外观上来看,与其它的选项卡没有太大差别,不过这里运用了jQuery里模拟鼠标事件的函数:trigger(type,[data]) ,在每一个匹配的元素上触发某类事件,再与setInterval配合,实现了...
JS的经典封装,有下载好的有实例(用JS实现~~~CSS圆角边框,模拟视窗,TAB选项卡,多样化折叠菜单,代码自动高亮,多样化的垂直菜单,图片倒影效果等等。。)
用JS实现~~~CSS圆角边框,模拟视窗,TAB选项卡,多样化折叠菜单,代码自动高亮,多样化的垂直菜单,图片倒影效果等等。。
包含Vista特效,图片倒影效果,模拟视窗,多样化折叠菜单,TAB选项卡等等
EN |侧边栏标签Firefox的Web扩展。 模拟侧边栏中的标签页并... 垂直显示标签。 分组标签并折叠/展开它们。... 从选项卡组中的选项卡打开的新选项卡将显示为该组的选项卡。 要取消选项卡的分组,可以从上下文菜单中进
国内外 Java Script 经典封装 非常实用 开发网站必备 一、多样化摺叠菜单二、CSS圆角边框三、模拟视窗 四、支持FF的省略符五、TAB选项卡六、最佳化多样式Windows七、多样化的垂直菜单.....
多样化摺叠菜单,CSS圆角边框,模拟视窗,支持FF的省略符,TAB选项卡,最佳化多样式Windows,多样化的垂直菜单,多样化的连结提示效果,侧栏式折叠菜单,图形滚动条,图片倒影效果,代码自动高亮,酷似flash效果的...
多样化摺叠菜单,CSS圆角边框,模拟视窗,支持FF的省略符,TAB选项卡,最佳化多样式Windows,多样化的垂直菜单,多样化的连结提示效果,侧栏式折叠菜单,图形滚动条,图片倒影效果,代码自动高亮,酷似flash效果的...
多样化摺叠菜单,CSS圆角边框,模拟视窗,支持FF的省略符,TAB选项卡,最佳化多样式Windows,多样化的垂直菜单,多样化的连结提示效果,侧栏式折叠菜单,图形滚动条,图片倒影效果,代码自动高亮,酷似flash效果的...
多样化摺叠菜单,CSS圆角边框,模拟视窗,支持FF的省略符,TAB选项卡,最佳化多样式Windows,多样化的垂直菜单,多样化的连结提示效果,侧栏式折叠菜单,图形滚动条,图片倒影效果,代码自动高亮,酷似flash效果的...
3.jQuery动感图标切换网页Tab选项卡导航代码 4.jquery封装Tab标签选项卡,内含动画版选项卡及滑动门 5.jQuery实现flash动感切换选项卡TAB插件示例 6.jquery制作自动播放的TAB切换特效 7.基于jQuery简单的Tab...
多样化摺叠菜单,CSS圆角边框,模拟视窗,支持FF的省略符,TAB选项卡,最佳化多样式Windows,多样化的垂直菜单,多样化的连结提示效果,侧栏式折叠菜单,图形滚动条,图片倒影效果,代码自动高亮,酷似flash效果的...
多样化摺叠菜单,CSS圆角边框,模拟视窗,支持FF的省略符,TAB选项卡,最佳化多样式Windows,多样化的垂直菜单,多样化的连结提示效果,侧栏式折叠菜单,图形滚动条,图片倒影效果,代码自动高亮,酷似flash效果的...
多样化摺叠菜单,CSS圆角边框,模拟视窗,支持FF的省略符,TAB选项卡,最佳化多样式Windows,多样化的垂直菜单,多样化的连结提示效果,侧栏式折叠菜单,图形滚动条,图片倒影效果,代码自动高亮,酷似flash效果的...
多样化摺叠菜单,CSS圆角边框,模拟视窗,支持FF的省略符,TAB选项卡,最佳化多样式Windows,多样化的垂直菜单,多样化的连结提示效果,侧栏式折叠菜单,图形滚动条,图片倒影效果,代码自动高亮,酷似flash效果的...
多样化摺叠菜单,CSS圆角边框,模拟视窗,支持FF的省略符,TAB选项卡,最佳化多样式Windows,多样化的垂直菜单,多样化的连结提示效果,侧栏式折叠菜单,图形滚动条,图片倒影效果,代码自动高亮,酷似flash效果的...
多样化摺叠菜单,CSS圆角边框,模拟视窗,支持FF的省略符,TAB选项卡,最佳化多样式Windows,多样化的垂直菜单,多样化的连结提示效果,侧栏式折叠菜单,图形滚动条,图片倒影效果,代码自动高亮,酷似flash效果的...
多样化摺叠菜单,CSS圆角边框,模拟视窗,支持FF的省略符,TAB选项卡,最佳化多样式Windows,多样化的垂直菜单,多样化的连结提示效果,侧栏式折叠菜单,图形滚动条,图片倒影效果,代码自动高亮,酷似flash效果的...
横向滑动tab选项卡(JS获取e.currentTarget.dataset.index,根据不同的index来显示不同的页面,同时判断是否是滑动引起的界面切换)5.Menu菜单栏6.选择菜品并下单7.生成订单详情8.用户评价并晒买家秀主页:订单详情:...