前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态

最新推荐文章于 2024-01-30 23:36:50 发布

小豆逗hello

最新推荐文章于 2024-01-30 23:36:50 发布

阅读量1.2k

点赞数

http://www.websjy.com/club/websjy_index/47/#

<!DOCTYPE html>
<html>
<head>
    <title>前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态</title>
    <style>
        body, html { height: 100%; }
        #div_pannel { height: 800px; }
        * { margin: 0; padding: 0; }
        #div_tab { background: #fff url(images/t_tab_bg.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(images/t_tab_uselectbg.gif); margin-top: 3px; height: 23px; }
        #div_tab li span { background: url(images/t_tab_uselectbg.gif); height: 23px; line-height: 23px; }

        #div_tab li.crent { background: url(images/t_tab_selectbg.gif); margin-top: 2px; height: 24px; }
        #div_tab li.crent span { background: url(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 { background:#ccc; 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(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; }
        .f_left { border: 1px solid #ccc; float: left; width: 200px; background:#ccc; }
        .f_right { border: 1px solid #ccc; float: left; width: 800px; }
        .page{ width:1006px; overflow:hidden; clear:both; margin:0 auto;}
    </style>
    <script type="text/javascript" src="http://xinlei848586.blog.163.com/blog/js/tabpage.js"></script>
</head>
<body>
<div class="page">

    <div class="f_left">
        <!--<a href="http://xinlei848586.blog.163.com/blog/#" οnclick="CreateDiv('baidu','http://www.baidu.com','百度')">百度</a> <a href="http://xinlei848586.blog.163.com/blog/#"
                οnclick="CreateDiv('lempon','http://www.163.com','设计源网')">设计源网</a> <a href="http://xinlei848586.blog.163.com/blog/#" οnclick="CreateDiv('ok22','http://www.happy175.com','快乐一起舞')">
                    快乐一起舞</a>-->

        <script type="text/javascript">
            document.write("<a href='#' οnclick=\"CreateDiv('baidu','http://www.baidu.com','百度')\">百度</a><br/><br/>");
            document.write("<a href='#' οnclick=\"CreateDiv('lempon','http://www.163.com','163')\">163</a><br/><br/>");
            document.write("<a href='#' οnclick=\"CreateDiv('ok22','http://www.taxqd.com','青岛财税网')\">青岛财税网</a><br/><br/>");
        </script>
    </div>
    <div class="f_right">
        <ul class="clearfix" id="div_tab">
        </ul>
        <div id="div_pannel">
        </div>
    </div>
</div>
</body>
</html>

<script>
// JavaScript Document
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>

小豆逗hello

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态

http://www.websjy.com/club/websjy_index/47/#html> 前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态 body, html { height: 100%; } #div_pannel { height: 800px; } * { marg
复制链接

扫一扫