本人不懂JS，求JS大神帮忙解决一个问题

jsjavascripttab

解决方案 »

  1.   

    自己修改代码增加配置，配置为不允许关闭就去掉x那个图片，楼主也搞笑，不懂js你还懂得eval压缩哦。。<!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 runat="server">
            <title>js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态</title>
        <style>
        body,html{height:100%;}
        #div_pannel{height:800px;}
        *{margin:0;padding:0;}
        #div_tab{background:#fff url(http://www.ok22.org/images/t_tab_bg.gif) repeat-x 0 bottom;height:26px;padding:15px 15px 0;margin-bottom:10px;overflow:hidden;}
        #div_tab li{float:left;text-align:center;position:relative;list-style:none;}   
        #div_tab li{background:url(http://www.ok22.org/images/t_tab_uselectbg.gif);margin-top:3px;height:23px;}
        #div_tab li span{background:url(http://www.ok22.org/images/t_tab_uselectbg.gif);height:23px;line-height:23px;}   
        #div_tab li.crent{background:url(http://www.ok22.org/images/t_tab_selectbg.gif);margin-top:2px;height:24px;}
        #div_tab li.crent span{background:url(http://www.ok22.org/images/t_tab_selectbg.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://www.ok22.org/images/t_delete_ico.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,cannotclose) {//增加第四个参数，为true则不添加关闭按钮
                if (document.getElementById("div_" + tabid) == null) {
                    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);
                    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"
                        }
                    }
                    var tab = document.createElement("li");
                    tab.className = "crent";
                    tab.id = tabid;
                    var litxt = "<span><a href=\"javascript:;\" onclick=\"javascript:CreateDiv('" + tabid + "','" + url + "','" + name + "')\" title=" + name + " class=\"menua\">" + name + "</a>"
                    + (cannotclose ? "" : "<a onclick=\"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');
                    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'
                }
            }
            function init() {
                CreateDiv('baidu', 'http://www.baidu.com', '百度', true);
            }
        </script>
    </head>
    <body onload="init()">
        <a href="#" onclick="CreateDiv('baidu','http://www.baidu.com','百度')">百度</a>  <a href="#" onclick="CreateDiv('lempon','http://www.lempon.com','领跑者建筑网')">领跑者建筑网</a>  <a href="#" onclick="CreateDiv('ok22','http://www.ok22.org','幸凡在线学习网')">幸凡在线学习网</a>
        <ul class="clearfix" id="div_tab"></ul> <!--菜单列表 -->
        <div id="div_pannel"></div> <!--新iframe列表-->
    </body>
    </html>
      

  2.   

    谢谢版主了，哈哈，eval压缩不是我搞的，拷贝过来的嘛。谢谢你了
      

  3.   

    再次感谢版主 showbo  结贴了