仿浏览器TAB效果

首页 > 代码库 > 仿浏览器TAB效果

2024-08-30 23:38:53 210人阅读

仿浏览器的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="http://www.mamicode.com/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=http://www.mamicode.com/url;"-1"]‘).removeClass(‘visited‘).addClass(‘hover‘)  }return false;  })  })</script></body></html>

仿浏览器TAB效果

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 仿浏览器TAB效果

仿浏览器TAB效果

仿浏览器的Tag标签

看完仍有疑问？有类似问题直接问程序猿