仿浏览器TAB效果

时间：2017-01-06 18:37:52 阅读：158 评论：0 收藏：0 [点我收藏+]

标签：tar play document query attr http att type isp

仿浏览器的Tag标签

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

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><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>
<script>
$(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;
  })
  })
</script></body>
</html>

仿浏览器TAB效果

标签：tar play document query attr http att type isp

原文地址：http://www.cnblogs.com/heyinwangchuan/p/6256971.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行