仿浏览器的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. 软件工程随笔（1）--jetbrain在软件工程中的应用

    接下来几天我要写半年的软件工程学习后的感想,今天从介绍IDE开始.首先,本人至今为止全部项目都是在mypclise上完成的.本人采用myeclipse唯一的原因就是它使用方便.但是,我也承认myecl ...

  2. exynos4412中断编程

    中断概述 我们知道,ARM核能处理的异常有7种,但仅仅区分异常的种类显然不能够满足需求.拿手机来说,触摸屏幕和按下音量键可能都是irq异常,但是ARM并不能将他们区分开,而事实的情况是针对这两种中断, ...

  3. python排序之一插入排序

    python排序之一插入排序 首先什么是插入排序,个人理解就是拿队列中的一个元素与其之前的元素一一做比较交根据大小换位置的过程好了我们先来看看代码 首先就是一个无序的列表先打印它好让排序后有对比效果, ...

  4. [js] 变量空值研究

    最近js的空值弄得焦头烂额,今天写个博客记录下. javascript变量空值一共有3种 1.“” var e=""; 2.null var e=null; 3.NaN var e ...

  5. hbase 权威指南笔记（二）

    这次我们先来讨论hbase的重试机制,为什么呐,因为最近公司最近也在做这方面的优化,所以就今天研究的一些成功记录一下. configuration.setInt("hbase.client. ...

  6. 用java String类的getBytes(String charsetName)和String(byte[] bytes, String charsetName)解决乱码问题

    Java中String的数据是如何存储的,查看源代码就可以知道,String的数据是存储在char[] value这样一个成员变量中的,char类型的大小在java中是2个字节 我们还知道,现在普遍使 ...

  7. AngularJS（1）

    AngularJS(1) 在讲正题之前,先说一下有关angular简介方面的信息: 1. angularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优 ...

  8. [No0000AA]Windows 系统环境变量列表

    环境变量 详细信息 %ALLUSERSPROFILE% 所有用户 Profile 文件位置 %APPDATA% 应用程序数据的默认存放位置 %CD% 当前目录 %CLIENTNAME% 联接到终端服务 ...

  9. 纯css3图片旋转展示

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  10. mobiscroll之treelist使用

    前言 进行前端开发工作也有一段时间了,一直以来都是渣渣,以前开通博客写过一段时间但是没坚持下来,现在想有时候还是得写写什么吧,自己遇到的新东西写写归纳总结一下总归是好的,并且能够与更多人交流分享,相互 ...