<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>

简单实现Tab切换(带框架)的更多相关文章

  1. 简单的Tab切换组件

    由于代码都有注释,所以不多加解释,大家都知道的.直接贴代码: 代码如下: /** * 简单的Tab切换 * 支持可配置项 如下参数 */ function Tab(){ this.config = { ...

  2. react简单的tab切换 (styled-components)

    其实,在我们日常的编程当中,经常会碰到tab切换的模块,那么,实现他的方法也有很多中,下面是一款简单,容易理解的react tab切换方法. 通过设置state中的current 属性去控制tab 和 ...

  3. jquery实现简单的Tab切换菜单

    实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...

  4. DIV+CSS 样式简单布局Tab 切换

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  5. jQuery实现简单的tab切换

    html: <section>   <nav id="nav">     <a class="on">tab1</a& ...

  6. 【angular】angular实现简单的tab切换

    html: <div class="list-group" ng-repeat="tab in menuList"> <a href=&quo ...

  7. 从一个简单的Tab切换开始——与AJAX的结合

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 最简单的tab切换

    JS: $(".con").eq(0).show();    $(".btn span").click(function(){        var num = ...

  9. react实现的tab切换组件

    我有点想要吐槽,因为用原生的js实现起来挺简单的一个小东西,改用react来写却花了我不少时间,也许react的写法只有在复杂的web应用中才能体现出它的优势吧!不过吐槽归吐槽,对react这种优雅的 ...

随机推荐

  1. [电子书] 《Android编程入门很简单》

    <Android编程入门很简单>是一本与众不同的Android学习读物,是一本化繁为简,把抽象问题具体化,把复杂问题简单化的书.本书避免出现云山雾罩.晦涩难懂的讲解,代之以轻松活泼.由浅入 ...

  2. Windows Phone8 中如何引用 SQLite 数据库

    SQLite数据库介绍 1.SQLite是一款轻型的嵌入式数据库,使用C++开发,使用非常广泛 2.SQLite是一款跨平台的数据库,支持Windows.Linux.Android.IOS.Windo ...

  3. HTML5——多次定位请求

    多次定位请求及点击一次 就不断的触发请求事件,和单次定位请求写法差不多,只需要将 navigator.geolocation.getCurrentPosition改为navigator.geoloca ...

  4. CreateCompatibleDC与BitBlt 学习

    CreateCompatibleDC与BitBlt CreateCompatibleDC 创建一个与指定设备一致的内存设备描述表. HDC CreateCompatibleDC(HDC hdc //设 ...

  5. sublime text下代码太长brackethighlighter不能正确显示闭合高亮的解决方法

    用brackethighlighter显示高亮一直都有这个问题...也没在网上找到解决方案,就一直凑合着用,今天翻着配置文件玩,改了参数发现问题解决了...... 修改search_threshold ...

  6. Eclipse_调试技巧

    一.使用Display视图实时计算变量结果(带智能提示)  windows-->show view-->display http://stackoverflow.com/questions ...

  7. Html-Css-li标签增加图片

    制作一个需要显示颜色的圆点. <style> .item1 ul{list-style:none} .item1 li{padding-left:20px;background:url(圆 ...

  8. 搭建一个springMVC项目以及遇到的问题

    首先找到jar包(lz现在还在学习maven,以后回了,就用maven了,自己配置时,jar包不全就很容易到时搭建失败)

  9. POJ 2559 Largest Rectangle in a Histogram

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 18942   Accepted: 6083 Description A hi ...

  10. Codeforces 567D One-Dimensional Battle Ships

    传送门 D. One-Dimensional Battle Ships time limit per test 1 second memory limit per test 256 megabytes ...