简单实现Tab切换(带框架)
<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切换(带框架)的更多相关文章
- 简单的Tab切换组件
由于代码都有注释,所以不多加解释,大家都知道的.直接贴代码: 代码如下: /** * 简单的Tab切换 * 支持可配置项 如下参数 */ function Tab(){ this.config = { ...
- react简单的tab切换 (styled-components)
其实,在我们日常的编程当中,经常会碰到tab切换的模块,那么,实现他的方法也有很多中,下面是一款简单,容易理解的react tab切换方法. 通过设置state中的current 属性去控制tab 和 ...
- jquery实现简单的Tab切换菜单
实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...
- DIV+CSS 样式简单布局Tab 切换
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- jQuery实现简单的tab切换
html: <section> <nav id="nav"> <a class="on">tab1</a& ...
- 【angular】angular实现简单的tab切换
html: <div class="list-group" ng-repeat="tab in menuList"> <a href=&quo ...
- 从一个简单的Tab切换开始——与AJAX的结合
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 最简单的tab切换
JS: $(".con").eq(0).show(); $(".btn span").click(function(){ var num = ...
- react实现的tab切换组件
我有点想要吐槽,因为用原生的js实现起来挺简单的一个小东西,改用react来写却花了我不少时间,也许react的写法只有在复杂的web应用中才能体现出它的优势吧!不过吐槽归吐槽,对react这种优雅的 ...
随机推荐
- [电子书] 《Android编程入门很简单》
<Android编程入门很简单>是一本与众不同的Android学习读物,是一本化繁为简,把抽象问题具体化,把复杂问题简单化的书.本书避免出现云山雾罩.晦涩难懂的讲解,代之以轻松活泼.由浅入 ...
- Windows Phone8 中如何引用 SQLite 数据库
SQLite数据库介绍 1.SQLite是一款轻型的嵌入式数据库,使用C++开发,使用非常广泛 2.SQLite是一款跨平台的数据库,支持Windows.Linux.Android.IOS.Windo ...
- HTML5——多次定位请求
多次定位请求及点击一次 就不断的触发请求事件,和单次定位请求写法差不多,只需要将 navigator.geolocation.getCurrentPosition改为navigator.geoloca ...
- CreateCompatibleDC与BitBlt 学习
CreateCompatibleDC与BitBlt CreateCompatibleDC 创建一个与指定设备一致的内存设备描述表. HDC CreateCompatibleDC(HDC hdc //设 ...
- sublime text下代码太长brackethighlighter不能正确显示闭合高亮的解决方法
用brackethighlighter显示高亮一直都有这个问题...也没在网上找到解决方案,就一直凑合着用,今天翻着配置文件玩,改了参数发现问题解决了...... 修改search_threshold ...
- Eclipse_调试技巧
一.使用Display视图实时计算变量结果(带智能提示) windows-->show view-->display http://stackoverflow.com/questions ...
- Html-Css-li标签增加图片
制作一个需要显示颜色的圆点. <style> .item1 ul{list-style:none} .item1 li{padding-left:20px;background:url(圆 ...
- 搭建一个springMVC项目以及遇到的问题
首先找到jar包(lz现在还在学习maven,以后回了,就用maven了,自己配置时,jar包不全就很容易到时搭建失败)
- POJ 2559 Largest Rectangle in a Histogram
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 18942 Accepted: 6083 Description A hi ...
- Codeforces 567D One-Dimensional Battle Ships
传送门 D. One-Dimensional Battle Ships time limit per test 1 second memory limit per test 256 megabytes ...