仿浏览器的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. block为什么用copy以及如何解决循环引用

    在完成项目期间,不可避免的会使用到block,因为block有着比delegate和notification可读性更高,而且看起来代码也会很简洁.于是在目前的项目中大量的使用block. 之前给大家介 ...

  2. 信息系统实践手记6-JS调用Flex的性能问题一例

    说明:信息系统实践手记系列是系笔者在平时研发中先后遇到的大小的问题,也许朴实和细微,但往往却是经常遇到的问题.笔者对其中比较典型的加以收集,描述,归纳和分享. 摘要:此文描述了笔者接触过的部分信息系统 ...

  3. 常用的14种HTTP状态码速查手册

    分类 1xx \> Information(信息) // 接收的请求正在处理 2xx \> Success(成功) // 请求正常处理完毕 3xx \> Redirection(重定 ...

  4. BZOJ 2693: jzptab [莫比乌斯反演 线性筛]

    2693: jzptab Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 1194  Solved: 455[Submit][Status][Discu ...

  5. jenkins / ant / jmeter 持续集成接口自动化

    1. 将 jmeter 脚本放在/var/lib/jenkins/workspace/Jmeter_auto/jmxpath路径下 2. 点击http://jk.facebank.net.cn/job ...

  6. hibernate三种状态

    转自:http://www.cnblogs.com/xiaoluo501395377/p/3380270.html 学过hibernate的人都可能都知道hibernate有三种状态,transien ...

  7. 监控系统Opserver的配置调试

    Stack Exchange开源其监控系统Opserver有一段时间了.之前在项目中用过他们的MiniProfile来分析页面执行效率和帮助新人了解项目,当他们开源了其监控系统的时候正好部门也在关注监 ...

  8. [LeetCode] Reverse Vowels of a String 翻转字符串中的元音字母

    Write a function that takes a string as input and reverse only the vowels of a string. Example 1:Giv ...

  9. [LeetCode] Contains Duplicate II 包含重复值之二

    Given an array of integers and an integer k, return true if and only if there are two distinct indic ...

  10. SQLite3源程序分析之虚拟机

    前言 最早的虚拟机可追溯到IBM的VM/370,到上个世纪90年代,在计算机程序设计语言领域又出现一件革命性的事情——Java语言的出现,它与c++最大的不同在于它必须在Java虚拟机上运行.Java ...