实现类似网易邮箱的标签页功能

最新推荐文章于 2017-09-15 15:09:28 发布
ChaoYang0502
最新推荐文章于 2017-09-15 15:09:28 发布
阅读量2k
点赞数 1
分类专栏： JavaScript 文章标签：网易 javascript div iframe url class
本文链接：https://blog.csdn.net/chaoyang0502/article/details/7217860
版权
JavaScript 专栏收录该内容
16 篇文章 0 订阅
订阅专栏
1.效果图如下：
2.代码如下：
CRM
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
 
 <html 
  xmlns= 
 "http://www.w3.org/1999/xhtml" 
 > 
 
 
 <head> 
 
     
 <title>实现类似网易邮箱的标签页功能 
 </title> 
 
     
 <style> 
 
     
 body 
 , 
 html 
 { 
 height 
 : 
 100 
 % 
 ;font-family:"微软雅黑","宋体";font-size:14px;} 
 
     
 #div_pannel 
 { 
 height 
 : 
 800px 
 ;} 
 
     
 * 
 { 
 margin 
 : 
 0; 
 padding 
 : 
 0 
 ;} 
 
     
 #div_tab 
 { 
 background 
 : 
 #fff 
 url(http://hi.csdn.net/attachment/201201/29/0_1327819767RF9a.gif) 
 repeat-x 
 0 
 bottom; 
 height 
 : 
 26px; 
 padding 
 : 
 15px 
 15px 
 0; 
 margin-bottom 
 : 
 10px 
 ;} 
 
     
 #div_tab 
  li 
 { 
 float 
 : 
 left; 
 text-align 
 : 
 center; 
 position 
 : 
 relative; 
 list-style 
 : 
 none 
 ;} 
 
     
 
     
 #div_tab 
  li 
 { 
 background 
 : 
 url(http://hi.csdn.net/attachment/201201/29/0_132781977456M3.gif); 
 margin-top 
 : 
 3px; 
 height 
 : 
 23px 
 ;} 
 
     
 #div_tab 
  li 
 span 
 { 
 background 
 : 
 url(http://hi.csdn.net/attachment/201201/29/0_132781977456M3.gif); 
 height 
 : 
 23px; 
 line-height 
 : 
 23px 
 ;} 
 
     
 
     
 #div_tab 
  li 
 .crent 
 { 
 background 
 : 
 url(http://hi.csdn.net/attachment/201201/29/0_1327819976svMe.gif); 
 margin-top 
 : 
 2px; 
 height 
 : 
 24px 
 ;} 
 
     
 #div_tab 
  li 
 .crent 
  span 
 { 
 background 
 : 
 url(http://hi.csdn.net/attachment/201201/29/0_1327819976svMe.gif); 
 height 
 : 
 24px; 
 line-height 
 : 
 24px 
 ;} 
 
     
 
     
 #div_tab 
  li 
 , 
 #div_tab 
 li 
 .crent 
 { 
 color 
 : 
 #fff; 
 background-repeat 
 : 
 no-repeat; 
 background-position 
 : 
 0 
 0 
 ;}    
 
     
 #div_tab 
  li 
 span 
 , 
 #div_tab 
 li 
 .crent 
 span 
 { 
 display 
 : 
 inline 
 - 
 block; 
 padding 
 : 
 0 
 36px 
 0 
 15px; 
 background-repeat 
 : 
 no-repeat; 
 background-position 
 : 
 right 
 bottom 
 ;} 
 
     
 
     
 #div_tab 
  li 
 .menua 
 { 
 color 
 : 
 #000; 
 font-size 
 : 
 12px; 
 text-decoration 
 : 
 none; 
 position 
 : 
 relative 
 ;} 
 
     
 #div_tab 
  li 
 .crent 
 .menua 
 , 
 #div_tab 
 li 
 .menua 
 :hover 
 { 
 color 
 : 
 #ff0000 
 ;} 
 
     
 #div_tab 
  li 
 .win_close 
 , 
 #div_tab 
 li 
 .crent 
 .win_close 
 { 
 width 
 : 
 14px; 
 height 
 : 
 14px; 
 position 
 : 
 absolute; 
 top 
 : 
 4px; 
 right 
 : 
 5px; 
 cursor 
 : 
 pointer; 
 display 
 : 
 block; 
 overflow 
 : 
 hidden; 
 background 
 : 
 url(http://hi.csdn.net/attachment/201201/29/0_13278197591eZ2.gif) 
 no-repeat 
 ;}        
 
     
 #div_tab 
  li 
 .win_close 
 { 
 background-position 
 : 
 0 
 -14px 
 ;} 
 
     
 #div_tab 
  li 
 .win_close 
 :hover 
 { 
 background-position 
 : 
 0 
 0 
 ;} 
 
     
 
     
 .clearfix 
 :after 
 { 
 content 
 : 
 "."; 
 display 
 : 
 block; 
 height 
 : 
 0; 
 clear 
 : 
 both; 
 visibility 
 : 
 hidden 
 ;} 
 
     
 * 
 html 
 .clearfix 
 { 
 height 
 : 
 1 
 % 
 ;} 
 
     
 *+ 
 html 
 .clearfix 
 { 
 height 
 : 
 1 
 % 
 ;} 
 
     
 .clearfix 
 { 
 display 
 : 
 inline 
 - 
 block 
 ;} 
 
     
 /* Hide from IE Mac */ 
 
     
 .clearfix 
 { 
 display 
 : 
 block 
 ;} 
 
     
 </style> 
 
     
 <script  
 type= 
 "text/javascript" 
 > 
 
         
 function 
  CreateDiv( 
 tabid 
 , 
 url 
 , 
 name) 
 
          
 { 
 
             
 ///如果当前tabid存在直接显示已经打开的tab 
 
             
 if ( 
 document 
 . 
 getElementById( 
 "div_" 
 + 
 tabid) 
 == 
 null) 
 
             
 { 
 
                 
 //创建iframe 
 
                 
 var 
  box 
 = 
 document 
 . 
 createElement( 
 "iframe"); 
 
                 
 box 
 . 
 id 
 = 
 "div_" 
 + 
 tabid; 
 
                 
 box 
 . 
 src 
 = 
 url; 
 
                 
 box 
 . 
 height 
 = 
 "100%"; 
 
                 
 box 
 . 
 frameBorder 
 = 
 0; 
 
                 
 box 
 . 
 width 
 = 
 "100%"; 
 
                 
 document 
 . 
 getElementById( 
 "div_pannel" 
 ). 
 appendChild( 
 box); 
 
         
 
                 
 //遍历并清除开始存在的tab当前效果并隐藏其显示的div 
 
                 
 var 
  tablist 
 = 
 document 
 . 
 getElementById( 
 "div_tab" 
 ). 
 getElementsByTagName( 
 "li"); 
 
                 
 var 
  pannellist 
 = 
  document 
 . 
 getElementById( 
 "div_pannel" 
 ). 
 getElementsByTagName( 
 "iframe"); 
 
                 
 if ( 
 tablist 
 . 
 length 
 > 
 0) 
 
                 
 { 
 
                     
 for ( 
 i 
 = 
 0; 
 i 
 < 
 tablist 
 . 
 length; 
 i 
 ++) 
 
                     
 { 
 
                         
 tablist 
 [ 
 i 
 ]. 
 className 
 = 
 ""; 
 
                         
 pannellist 
 [ 
 i 
 ]. 
 style 
 . 
 display 
 = 
 "none"; 
 
                     
 } 
 
                 
 } 
 
         
 
                 
 //创建li菜单 
 
                 
 var 
  tab 
 = 
 document 
 . 
 createElement( 
 "li"); 
 
                 
 tab 
 . 
 className 
 = 
 "crent"; 
 
                 
 tab 
 . 
 id 
 = 
 tabid; 
 
                 
 var 
  litxt 
 = 
 '<span><a href="javascript:;" οnclick=\'javascript:CreateDiv("' 
 + 
 tabid 
 + 
 '","' 
 + 
 url 
 + 
 '","' 
 + 
 name 
 + 
 '")\' title="' 
 + 
 name 
 + 
 '" class="menua">' 
 + 
 name 
 + 
 '</a><a οnclick="RemoveDiv(\'' 
 + 
 tabid 
 + 
 '\')" class="win_close" title="关闭当前窗口"><a></span>'; 
 
                 
 tab 
 . 
 innerHTML 
 = 
 litxt; 
 
                 
 document 
 . 
 getElementById( 
 "div_tab" 
 ). 
 appendChild( 
 tab); 
 
             
 } 
 
             
 else 
 
             
 { 
 
                 
 var 
  tablist 
 = 
 document 
 . 
 getElementById( 
 "div_tab" 
 ). 
 getElementsByTagName( 
 "li"); 
 
                 
 var 
  pannellist 
 = 
  document 
 . 
 getElementById( 
 "div_pannel" 
 ). 
 getElementsByTagName( 
 "iframe"); 
 
                 
 //alert(tablist.length); 
 
                 
 for ( 
 i 
 = 
 0; 
 i 
 < 
 tablist 
 . 
 length; 
 i 
 ++) 
 
                 
 { 
 
                     
 tablist 
 [ 
 i 
 ]. 
 className 
 = 
 ""; 
 
                     
 pannellist 
 [ 
 i 
 ]. 
 style 
 . 
 display 
 = 
 "none" 
 
                 
 } 
 
                 
 document 
 . 
 getElementById( 
 tabid 
 ). 
 className 
 = 
 "crent"; 
 
                 
 document 
 . 
 getElementById( 
 "div_" 
 + 
 tabid 
 ). 
 style 
 . 
 display 
 = 
 "block"; 
 
             
 } 
 
         
 } 
 
         
 function 
  RemoveDiv( 
 obj) 
 
          
 { 
 
             
 var 
  ob 
 = 
 document 
 . 
 getElementById( 
 obj); 
 
             
 ob 
 . 
 parentNode 
 . 
 removeChild( 
 ob); 
 
             
 var 
  obdiv 
 = 
 document 
 . 
 getElementById( 
 "div_" 
 + 
 obj); 
 
             
 obdiv 
 . 
 parentNode 
 . 
 removeChild( 
 obdiv); 
 
             
 var 
  tablist 
 = 
 document 
 . 
 getElementById( 
 "div_tab" 
 ). 
 getElementsByTagName( 
 "li"); 
 
             
 var 
  pannellist 
 = 
  document 
 . 
 getElementById( 
 "div_pannel" 
 ). 
 getElementsByTagName( 
 "iframe"); 
 
             
 if ( 
 tablist 
 . 
 length 
 > 
 0) 
 
             
 { 
 
                 
 tablist 
 [ 
 tablist 
 . 
 length 
 - 
 1 
 ]. 
 className 
 = 
 "crent"; 
 
                 
 pannellist 
 [ 
 tablist 
 . 
 length 
 - 
 1 
 ]. 
 style 
 . 
 display 
 = 
 "block"; 
 
             
 } 
 
         
 } 
 
     
 </script> 
 
 
 </head> 
 
 
 <body> 
 
 
 <a 
 href= 
 "javascript:;" 
 οnclick= 
 'CreateDiv("baidu","http://www.baidu.com","百度")' 
 >百度 
 </a> 
 &nbsp;&nbsp; 
 <a 
 href= 
 "javascript:;" 
 οnclick= 
 'CreateDiv("google","http://www.google.com.hk","谷歌")' 
 >谷歌 
 </a>  
 <a 
 href= 
 "javascript:;" 
 οnclick= 
 'CreateDiv("xingzhu","http://www.xingzhu.net.cn","星烛网")' 
 >星烛网 
 </a> 
 
 
 <a 
 href= 
 "javascript:;" 
 οnclick= 
 'CreateDiv("xzrj","http://www.xzrj.net","星烛软件")' 
 >星烛软件 
 </a> 
 
     
 <ul 
  class= 
 "clearfix" 
  id= 
 "div_tab" 
 ></ul> 
 
     
 <div 
  id= 
 "div_pannel" 
 ></div> 
 
 
 </body> 
 
 
 </html> 
 
 
 
 