仿浏览器的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. Android中使用java.util.Properties犯的错

    今天尝试使用java.util.Properties来保存应用配置,然而遇到了好几个问题,对于熟悉此内容的来说可能都是猪一样的错误,但难免有像我一样的新手再次遇到,希望此文能有所帮助. 错误1 jav ...

  2. JavaScript标准参考教材（alpha）--笔记

    一.导论 二.基本语法 1.严格来说var a=1与a=1效果不太一样,delete命令无法删除前者. JavaScirpt是一种动态类型语言,也就是说,变量的类型没有限制,可以赋予各种类型的值. J ...

  3. iOS系列 基础篇 03 探究应用生命周期

    iOS系列 基础篇 03 探究应用生命周期 目录: 1. 非运行状态 - 应用启动场景 2. 点击Home键 - 应用退出场景 3. 挂起重新运行场景 4. 内存清除 - 应用终止场景 5. 结尾 本 ...

  4. 分布式一致性算法--Raft

    前面一篇文章讲了Paxos协议,这篇文章讲它的姊妹篇Raft协议,相对于Paxos协议,Raft协议更为简单,也更容易工程实现.有关Raft协议和工程实现可以参考这个链接https://raft.gi ...

  5. linux 安装mysql数据库——yum安装法

    mysql数据库有多种安装方式,本文只介绍在Linux服务器上最实用.最快捷的mysql server安装方法.一.Linux服务器yum安装(CentOS6.3 64位) 所有在服务器上执行的命令, ...

  6. MySQL 数据库通过日志恢复

    http://blog.csdn.net/hanxin1987216/article/details/5976856 要想从二进制日志恢复数据,你需要知道当前二进制日志文件的路径和文件名.一般可以从选 ...

  7. 【转】 XenServer架构之HA概述

    一.XenServer HA概述 XenServer HA是一套全自动功能设计,规划,安全地恢复出现问题的XenServe 主机上的虚拟机的功能组件. 启用 HA 后,XenServer 将持续监视池 ...

  8. VMWare Tools 和 Shared folder（共享文件夹）

    转自: http://www.51testing.com/html/38/225738-143732.html 使用vmwar下shared folders功能实现vmware中host与ghost间 ...

  9. [bzoj1007][HNOI2008][水平可见直线] (斜率不等式)

    Description 在xoy直角坐标平面上有n条直线L1,L2,...Ln,若在y值为正无穷大处往下看,能见到Li的某个子线段,则称Li为 可见的,否则Li为被覆盖的. 例如,对于直线: L1:y ...

  10. [LeetCode] Count of Smaller Numbers After Self 计算后面较小数字的个数

    You are given an integer array nums and you have to return a new counts array. The counts array has ...