简单实现Tab切换(带框架)
2024-08-26 22:48:16
<script type="text/javascript">
$(function () {
//加载时添加的标签卡
if ('<%=Request["mid"] %>'=="1") {
addTab('标题1', '/test.aspx', false);
}
else if('<%=Request["mid"] %>'=="2") {
addTab('标题2', '/test1.aspx', false);
}
});
//添加标签 title:标签名 url:iframe对应网址 isclose:是否带关闭按钮
function addTab(title, url, isclose) {
//生成页面显示标签的HTML代码
var tabLength = $("#ttab li").children().length; var tabName = 'tabContent' + tabLength;
var tabTitle = 'tabTitle' + tabLength;
var tabTitleHtml = '';
if (isclose)
tabTitleHtml = '<li id="' + tabTitle + '"><a href="#' + tabName + '"><span>' + title + '<img src="/new_images/close.png" onclick="closeTab(' + tabLength + ')" /></span></a></li>';
else
tabTitleHtml = '<li><a href="#' + tabName + '"><span>' + title + '</span></a></li>';
$("#ttab").append(tabTitleHtml);
$("#tab-body").append('<div id="' + tabName + '" class="content"><iframe width="100%" height="100%" src="' + url + '" scrolling="auto"></iframe></div>'); ReShow();
}
function menuBind() {
$("#example ul li a").each(function (index) {
$(this).unbind("click");
$(this).bind("click", function () {
var obj = $("#example ul li a").eq(index);
var lk = obj.attr("datalink");
if (typeof (obj.attr("datalink")) != "undefined") {
addTab(obj.text(), lk, true);
}
});
});
}
function ckTabName(name) {
$("#ttab li a").each(function (index) {
$("#err").append(name + ' ' + $(this).text() + '<br>');
if (name == $(this).text())
return false;
});
return true;
}
//关闭标签(无需调用)
function closeTab(page) {
$("#tabTitle" + page).remove();
$("#tabContent" + page).remove();
ReShow();
}
//无需调用
function ReShow() {
$("#ttab li a").each(function (index) {
$(this).unbind("click");
$(this).bind("click", function () {
$("#ttab li").removeClass("z-crt");
$("#ttab li").eq(index).addClass("z-crt");
var tabName = $("#ttab li a").eq(index).attr('href');
tabName = tabName.substring(1, tabName.length);
$('.content').hide();
$('#tab-body div').eq(index).show();
});
});
$("#ttab li a:last").click();
}
</script> <div class="g-tab" id="tab1">
<div class="m-hd">
<ul id="ttab">
<li><a id="Desktop" href="#Desktop"><span>我的桌面</span></a></li>
</ul>
</div>
<div id="tab-body">
<div id="Desktop" class="content" ><iframe width="100%" height="100%" src="/MyDeskTop/MyPrompt.aspx" scrolling="auto"></iframe></div>
</div>
</div>
最新文章
- NOIP模拟赛20161023
- 转载 wpf使用经验
- jQuery Label Better – 友好的表单输入框提示插件
- 深入浅出Redis02 使用Redis数据库(String类型)
- NET-SNMP开发——日志输出
- WEB项目后端跨域请求
- tcp/ip程序
- Java:过去、未来的互联网编程之王
- android - 模拟器连接本地tomcat
- 支持iOS9 Universal links遇到的问题
- BZOJ 1305: [CQOI2009]dance跳舞( 最大流 )
- 《UNIX级别编程环境》注意读出信号(2)
- 读Zepto源码之Deferred模块
- 中科微北斗定位模组ATGM336H简介
- Linux C系统编程:信号与定时器的使用
- mysql6.5 操作日志
- 在U8菜单中增加自定义项
- ElementUI(vue UI库)、iView(vue UI库)、ant design(react UI库)中组件的区别
- Stored Properties 与 Computed Properties
- 安装wget
热门文章
- [BZOJ 2186][Sdoi2008]沙拉公主的困惑(欧拉函数)
- [USACO2002][poj1945]Power Hungry Cows(启发式搜索)
- 工作的思考十七:工作中容易犯的错误 - Delay
- Entity Framework with nolock. 允许脏读
- HOW TO REMOTELY DEBUG APPLICATION RUNNING ON TOMCAT FROM WITHIN INTELLIJ IDEA
- Grovvy初识
- Go语言开发环境搭建
- psd做成HTML相关参考页面
- Spring-事物配置
- 【Matplotlib】 标注细节注意