- <!DOCTYPE html>
- <html>
- <head>
- <title> tab 标签 </title>
- <script type="text/javascript" src1="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
- <style type="text/CSS">
- * {
- margin: 0;
- padding: 0;
- }
- a {
- text-decoration: none;
- blr: expression(this . onFocus = this . blur() );
- outline: none;
- color: #567890;
- }
- #tabs-ul {
- height: 25px;
- width: 100%;
- font-size: 12pt;
- background-color: #c8e6ef;
- border-bottom: 1px solid #222;
- list-style: none;
- }
- .tab-li {
- margin: 0 0 -1px 5px;
- height: 25px;
- line-height: 25px;
- padding: 0 5px;
- cursor: default;
- position: relative;
- float: left;
- background-color: #ccc;
- border-bottom: 1px solid #222;
- }
- /*
- .tab-li-nocurrent {
- background-color: #ccc;
- border-bottom: 1px solid #222;
- }
- .tab-li-current {
- background-color: #eee;
- border-bottom: 1px solid #eee;
- }
- */
- .tab-li span {
- cursor: pointer;
- }
- .tab-li .tabs-close {
- width: 12px;
- height: 12px;
- }
- .tab-li .tabs-close:hover {
- border: solid 1px #567890;
- }
- #iframes-ul {
- list-style: none;
- }
- .iframe-li {
- width: 100%;
- position: absolute;
- }
- </style>
- <script type="text/javascript">
- function addTab(title,url){
- var index = addTabTitle(title);
- if(index==-1){
- addTabIframe(url);
- }else{
- hideOtherChild(index);
- }
- }
- function addTabTitle(title){
- var tabTitle = '<li class="tab-li"><span onclick="javascript:toggleTab(this);">'+title+'</span> <span class="tabs-close" onclick="javascript:void(0);">×</span></li>';
- $('#strTemp').html(tabTitle);
- var index = -1;
- $('#tabs-ul .tab-li').each(function(){
- if($(this).html() == $('#strTemp').children().html()){
- index = $(this).index();
- }
- });
- if(index==-1){
- $('#tabs-ul').append(tabTitle);
- }else{
- //
- }
- return index;
- }
- function addTabIframe(url){
- var protocol = "";
- if(url.indexOf("://") == -1){
- protocol = "http://";
- }
- var tabIframe = '<li class="iframe-li" style="height:'+getIframeHeight()+'px">' +
- '<iframe scrolling="auto" frameborder="0" src="'+protocol+url+'" style="width:100%;height:100%;"></iframe></li>';
- $('#iframes-ul').append(tabIframe);
- }
- function toggleTab(ele){
- var index = $(ele).parent().index();
- hideOtherChild(index);
- }
- function hideOtherChild(index){
- // $('.tab-li').removeClass('tab-li-nocurrent').removeClass('tab-li-current').addClass('tab-li-nocurrent');
- // $('.tab-li').eq(index).removeClass('tab-li-nocurrent').addClass('tab-li-current');
- // alert(index + ' - ' + $('.tab-li').eq(index).text());
- $('.iframe-li').hide();
- $('.iframe-li').eq(index).show();
- }
- function getIframeHeight() {
- var otherHeight = $('#menu').height() + $('#tabDiv').height();
- var iframeHeight = $(window).height() - otherHeight - 3;
- return iframeHeight;
- }
- </script>
- </head>
- <body>
- <div id="strTemp" style="display:none;"></div>
- <div id="menu">
- <a href="javascript:addTab('百度','www.baidu.com');">baidu</a>
- <a href="javascript:addTab('QQ','www.qq.com');">qq</a>
- </div>
- <div id="tabDiv"><ul id="tabs-ul"></ul></div>
- <div id="iframeDiv" style=""><ul id="iframes-ul"></ul></div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/031220137678.html
来源: http://www.codesnippet.cn/detail/031220137678.html