看了很多别人写的tab切换效果感觉都只是div+js去切换已存在的!有的是添加或删除tab的但是太麻烦了还要改js文件你说是不是很不方便呢,我这个直接修改页面里面的参数就可以了!所以我自己就写了这个功能!谢谢,如果转载请注明出处(http://www.ok22.org)幸凡在线学习网
你自己可以添加菜单但是要注意的是CreateDiv(tabid,url,name) 第一个tabid不能重复,想添加多少个都行。但是太多了不知道会成什么样你自己看!
转自:
http://www.ok22.org/art_detail.aspx?id=118(可直接运行)
效果图如下:
<!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>
<title>前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态</title>
<style>
body,html{height:100%;}
#div_pannel{height:800px;}
*{margin:0;padding:0;}
#div_tab{background:#fff url(http://www.ok22.org/images/t_tab_bg.gif) repeat-x 0 bottom;height:26px;padding:15px 15px 0;margin-bottom:10px;}
#div_tab li{float:left;text-align:center;position:relative;list-style:none;}
#div_tab li{background:url(http://www.ok22.org/images/t_tab_uselectbg.gif);margin-top:3px;height:23px;}
#div_tab li span{background:url(http://www.ok22.org/images/t_tab_uselectbg.gif);height:23px;line-height:23px;}
#div_tab li.crent{background:url(http://www.ok22.org/images/t_tab_selectbg.gif);margin-top:2px;height:24px;}
#div_tab li.crent span{background:url(http://www.ok22.org/images/t_tab_selectbg.gif);height:24px;line-height:24px;}
#div_tab li,#div_tab li.crent{color:#fff;background-repeat:no-repeat;background-position:0 0;}
#div_tab li span,#div_tab li.crent span{display:inline-block;padding:0 36px 0 15px;background-repeat:no-repeat;background-position:right bottom;}
#div_tab li .menua{color:#000;font-size:12px; text-decoration:none;position:relative;}
#div_tab li.crent .menua,#div_tab li .menua:hover{color:#ff0000;}
#div_tab li .win_close,#div_tab li.crent .win_close{width:14px;height:14px;position:absolute;top:4px;right:5px;cursor:pointer;display:block;overflow:hidden;background:url(http://www.ok22.org/images/t_delete_ico.gif) no-repeat;}
#div_tab li .win_close{background-position:0 -14px;}
#div_tab li .win_close:hover{background-position:0 0;}
.clearfix:after {content:"."; display:block;height:0;clear:both; visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
.clearfix{display:inline-block;}
/* Hide from IE Mac */
.clearfix {display:block;}
</style>
<script type="text/javascript">
function CreateDiv(tabid, url, name)
{
///如果当前tabid存在直接显示已经打开的tab
if (document.getElementById("div_" + tabid) == null)
{
//创建iframe
var box = document.createElement("iframe");
box.id = "div_" + tabid;
box.src = url;
box.height = "100%";
box.frameBorder = 0;
box.width = "100%";
document.getElementById("div_pannel").appendChild(box);
//遍历并清除开始存在的tab当前效果并隐藏其显示的div
var tablist = document.getElementById("div_tab").getElementsByTagName('li');
var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');
if (tablist.length > 0)
{
for (i = 0; i < tablist.length; i++)
{
tablist[i].className = "";
pannellist[i].style.display = "none";
}
}
//创建li菜单
var tab = document.createElement("li");
tab.className = "crent";
tab.id = tabid;
var litxt = "<span><a href=\"javascript:;\" onclick=\"javascript:CreateDiv('" + tabid + "','" + url + "','" + name + "')\" title=" + name + " class=\"menua\">" + name + "</a><a onclick=\"RemoveDiv('" + tabid + "')\" class=\"win_close\" title=\"关闭当前窗口\"><a></span>";
tab.innerHTML = litxt;
document.getElementById("div_tab").appendChild(tab);
}
else
{
var tablist = document.getElementById("div_tab").getElementsByTagName('li');
var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');
//alert(tablist.length);
for (i = 0; i < tablist.length; i++)
{
tablist[i].className = "";
pannellist[i].style.display = "none"
}
document.getElementById(tabid).className = 'crent';
document.getElementById("div_" + tabid).style.display = 'block';
}
}
function RemoveDiv(obj)
{
var ob = document.getElementById(obj);
ob.parentNode.removeChild(ob);
var obdiv = document.getElementById("div_" + obj);
obdiv.parentNode.removeChild(obdiv);
var tablist = document.getElementById("div_tab").getElementsByTagName('li');
var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');
if (tablist.length > 0)
{
tablist[tablist.length - 1].className = 'crent';
pannellist[tablist.length - 1].style.display = 'block';
}
}
</script>
</head>
<body><a href="javascript:;" onclick="CreateDiv('baidu','http://www.baidu.com','百度')">百度</a> <a href="javascript:;" onclick="CreateDiv('lempon','http://www.lempon.com','领跑者建筑网')">领跑者建筑网</a> <a href="javascript:;" onclick="CreateDiv('ok22','http://www.ok22.org','幸凡在线学习网')">幸凡在线学习网</a>
<ul class="clearfix" id="div_tab"></ul>
<div id="div_pannel"></div>
</body>
</html>
分享到:
相关推荐
tab切换一个简单的小功能,在pc端还是在移动端总是可以预见使用的情况,下面总结一下tab切换的实现。tab切换简单来讲就是某一个标题下对应某一块内...
tab标签切换效果,标签切换部分背景可以设置多种色调,这是与其他tab标签有所区别的地方。懒人之家推荐下载
手机和pc端都可以使用的前端tab切换窗口插件。
JavaScript实现的tab标签自动切换效果源码(jQuery)
这是一个完整的web前端小项目,可以实现多张图片在网页上自动轮放。本人初学前端时写的小东西,不喜勿喷。如果是前端大神没必要下载。
javascript 实现支持淡入淡出翻转等切换效果的tab标签代码
本文实例讲述了JS实现的tab切换并显示相应内容模块功能。分享给大家供大家参考,具体如下: 思路:一层循环遍历操作的元素并获取当前遍历到的元素的下标,通过下标去选择显示对应的内容模块。 二层循环将元素恢复...
TAB标签 大型网站 使用的TAB标签例子 下了不后悔
JavaScript实现的向上可滚动切换的Tab选项卡源码
下拉刷新,tab切换_微信小程序模板js代码前台前端H5页面源码.rar
JavaScript实现的HashTabber垂直tab切换效果代码
下拉刷新,tab切换_企业城微信小程序js代码前台前端H5页面源码.rar
jQuery TAB文字列表自动切换.zip
jquery tab简单的招聘列表选项卡切换带点击弹出详细内容 jquery tab简单的招聘列表选项卡切换带点击弹出详细内容 jquery tab简单的招聘列表选项卡切换带点击弹出详细内容
用到了排他思想 双重for循环 以及获取下标的方式
今天机试有个内容是做网易云课堂tab栏切换的,如下 先简单说下我当时的想法 1.先弄一个大div盒子,我命名为tab 2.在大盒子tab里面有两个小盒子,分别是标题栏(tab_list)和内容栏(tab_con) 3.采用display:flex...
jquery.DOMWindow弹出层与TAB切换实例汇总,jquery.DOMWindow.js是浮动弹出框的核心部件,本插件的弹出框有多种形式,比如它可以弹出不带边框的、带有淡入淡出特效的、各种颜色的背景浮动框、弹出后背景会变暗的浮动...
第6章 Vuex状态管理;学习目标;目录;知识架构;知识架构;知识架构;知识架构;知识架构;商品列表: 单击“加入购物车”按钮,即可将商品添加到购物车 在底部的Tab栏中切换到“购物车”页面,可以查看购物车中的商品;...
迷你信息滚动,类似TAB选项卡风格的滚动信息,如果去掉滚动,可以当作TAB来用。当点击TAB选项卡,里面的内容会向上滚动,每一个都会滚动,用在你的网页上吧。
【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...