仿浏览器的Tag标签

这里先上个非常非常简陋的demo,没加CSS，我先把jquery的源码给全部搞通，在专心把这个功能给讲一下

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#smlist .visited{
color:#000;
}
#smlist .hover{
color:#f00;
}
#smlist a{
float:right;
display:block;
height:20px;
width:20px;
background-color:#000;
}
#iframe .visited{
display:none;
}
#iframe .hover{
display:block;
}
</style>
</head>
<body>
<div class="li_url" url="test1.html">1</div>
<div class="li_url" url="test2.html">2</div>
<div class="li_url" url="test3.html">3</div>
<div class="li_url" url="test4.html">4</div>
<div class="li_url" url="test5.html">5</div>
<ul id="smlist"></ul>
<div id="iframe">
<iframe src="test3.html" index="-1" class="hover"></iframe>
</div>

$(function(){
$.each($('.li_url '),function(i,v){
$(v).attr('index',i);
$(this).click(function(){
var index = $(this).attr('index');
var url = $(this).attr('url');
if (!($('#smlist li[index=' + index+ ']').length)) {
var li = document.createElement('li');
var content = $(this).html();
var iframe = document.createElement('iframe');
iframe.src=url;
iframe.setAttribute('index', index);
document.getElementById('iframe').appendChild(iframe);
li.innerHTML = content;
li.setAttribute('index', index);
li.setAttribute('url', url);
var a=document.createElement('a');
li.appendChild(a);
document.getElementById('smlist').appendChild(li);
}
$('#smlist li').removeClass('hover').addClass('visited');
$('#smlist li[index=' + index+ ']').removeClass('visited').addClass('hover');
$('iframe').removeClass('hover').addClass('visited')
$('iframe[index=' + index+ ']').removeClass('visited').addClass('hover')
})
})
$(document).on('click','#smlist li',function(){
var index = $(this).attr('index');
$('#smlist li').removeClass('hover').addClass('visited');
$('#smlist li[index=' + index+ ']').removeClass('visited').addClass('hover');
$('iframe').removeClass('hover').addClass('visited')
$('iframe[index=' + index+ ']').removeClass('visited').addClass('hover')
})
$(document).on('click','#smlist a',function(){
var parent = $(this).parent();
var index = parent.attr('index');
if(parent.hasClass('hover')){
if(!$('#smlist li[index=' + (index)+ ']').prev().length){
$('#smlist li[index=' + (index)+ ']').next().removeClass('visited').addClass('hover');
$('iframe[index=' + index+ ']').next().removeClass('visited').addClass('hover')
}else{
$('#smlist li[index=' + (index)+ ']').prev().removeClass('visited').addClass('hover');
console.log($('#smlist li[index=' + (index)+ ']').prev());
$('iframe[index=' + index+ ']').prev().removeClass('visited').addClass('hover')
}
}
parent.remove();
$('iframe[index=' + index+ ']').remove();
if( $('iframe').length==1){
$('iframe[index="-1"]').removeClass('visited').addClass('hover')
}
return false;
})
})
</body>
</html>

运行

仿浏览器TAB效果的更多相关文章

  1. 仿中关村win8频道（win8.zol.com.cn）下的tab效果

    最近觉得中关村win8频道下的那个Tab效果很好看. 一时兴起就自己做了一个.觉得还蛮不错的,特地来给大家分享一下.以下是相关的HTML页面写法: <div class="popula ...

  2. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  3. chrome浏览器tab页内存占用变大，网站变慢为哪般？

    问题概述: 公司做的是BS应用. 之前我们的后台服务器程序是带状态的,用ehcache存储登录状态:这两天被我改成了redis存储,应用本身不再存储登录状态. 然后自测,我在测试某个很耗时间的网页操作 ...

  4. 原生wcPop.js消息提示框(移动端)、内含仿微信弹窗效果

    wcPop.js移动端消息对话框插件是之前的wxPop.js的升级版,优化了js和css,并且新增了仿微信弹窗效果, 是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹 ...

  5. EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射（一） c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象

    EF+LINQ事物处理   在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...

  6. Android仿IOS回弹效果 ScrollView回弹 总结

    Android仿IOS回弹效果  ScrollView回弹 总结 应项目中的需求  须要仿IOS 下拉回弹的效果 , 我在网上搜了非常多 大多数都是拿scrollview 改吧改吧 试了一些  发现总 ...

  7. PHP实现仿Google分页效果的分页函数

    本文实例讲述了PHP实现仿Google分页效果的分页函数.分享给大家供大家参考.具体如下: /** * 分页函数 * @param int $total 总页数 * @param int $pages ...

  8. js监听浏览器tab窗口切换

    js监听浏览器tab窗口切换 ——IT唐伯虎 摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) {  document.addEventLis ...

  9. fragment做成选项卡，tab效果。 fragment+RadioGroup

    fragment做成选项卡,tab效果. fragment+RadioGroup from://http://blog.csdn.net/zimo2013/article/details/122393 ...

随机推荐

  1. 转载文章——Hadoop学习

    转载地址:http://www.iteye.com/blogs/subjects/zy19982004?page=2 一.Hadoop社区版和发行版 社区版:我们把Apache社区一直开发的Hadoo ...

  2. 国产方法论之 ReDoIt -- 惟思捷

    最近上了PMP课程,感觉受益匪浅,思路有被打开. 很同意一个观点“国人很擅长做事,但是不擅长总结出解决问题的通用框架和方法论”. 为了能提高中小企业生产力我最近成了一个小的软件咨询公司取名“惟思捷”, ...

  3. Kubernets搭建Kubernetes-dashboard

    接上篇文章,在已经部署好Kubernetes的基础上部署kubernetes-dashboard,它是官方提供的用户管理Kubernets集群可视化工具:部署dashboard其实和在kubernet ...

  4. python排序之二冒泡排序法

    python排序之二冒泡排序法 如果你理解之前的插入排序法那冒泡排序法就很容易理解,冒泡排序是两个两个以向后位移的方式比较大小在互换的过程好了不多了先上代码吧如下: 首先还是一个无序列表lis,老规矩 ...

  5. QTimer的用法

    1.singleShot的用法 代码: QTextEdit *testEdit = new QTextEdit("hello world"); testEdit->setMa ...

  6. Linux之shell篇

    shell是用户与系统交互的界面,这是基本方式之一.标准的shell为bash. shell的操作: 显示所有使用过的命令:history. 执行最近执行过的一条指令:!!.首先会给出执行的是哪一条指 ...

  7. BZOJ 1004 【HNOI2008】 Cards

    题目链接:Cards 听说这道题是染色问题的入门题,于是就去学了一下\(Bunside\)引理和\(P\acute{o}lya\)定理(其实还是没有懂),回来写这道题. 由于题目中保证"任意 ...

  8. python 第一章学习课程

    http://www.runoob.com/python/python-dictionary.html

  9. [LeetCode] Word Break 拆分词句

    Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...

  10. 如何用TypeScript开发微信小程序

    微信小程序来了!这个号称干掉传统app的玩意儿虽然目前处于内测阶段,不过目前在应用号的官方文档里已经放出了没有内测号也能使用的模拟器了. 工具和文档可以参考官方文档:https://mp.weixin ...