tab切换

最新推荐文章于 2023-08-24 15:38:58 发布

patherBlue

最新推荐文章于 2023-08-24 15:38:58 发布

阅读量863

点赞数

分类专栏：网页

网页专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡</title>
<style type="text/css">
body{
    text-align:center;
}
.tab1, .tab2 {
    width:350px;
    margin:0 5px;
    background:#CC9933;
    opacity:0.5;
    border-radius:5px 5px 5px 5px;
    box-shadow: #CCC 4px 4px 4px;
    text-align:left;
    float:left;
    display:inline;
}
.name {
    list-style:none;
    overflow:hidden;
}
.name li {
    width:90px;
    font:bold 16px/30px Verdana, Geneva, sans-serif;
    background:#669900;
    text-align:center;
    border-radius:5px 5px 5px;
    margin-right:5px;
    float:left;
    display:inline;
    cursor:pointer;
}
li.selected{
    background:#FF9900;
}
.content li{
    height:500px;
    display:none;
}
</style>
</head>

<body>
<div class="tab1">
    <ul class="name">
        <li>项目一</li>
        <li>项目二</li>
        <li>项目三</li>
    </ul>
    <ul class="content">
        <li>类为<em>"tab1"</em>项目一内容,通过<em>"click"</em>触发</li>
        <li>类为<em>"tab1"</em>项目二内容,通过<em>"click"</em>触发</li>
        <li>类为<em>"tab1"</em>项目三内容,通过<em>"click"</em>触发</li>
    </ul>
</div>
<div class="tab1">
    <ul class="name">
        <li>项目一</li>
        <li>项目二</li>
        <li>项目三</li>
    </ul>
    <ul class="content">
        <li>类为<em>"tab1"</em>项目一内容,通过<em>"click"</em>触发</li>
        <li>类为<em>"tab1"</em>项目二内容,通过<em>"click"</em>触发</li>
        <li>类为<em>"tab1"</em>项目三内容,通过<em>"click"</em>触发</li>
    </ul>
</div>
<div class="tab2">
    <ul class="name">
        <li>项目一</li>
        <li>项目二</li>
        <li>项目三</li>
    </ul>
    <ul class="content">
        <li>类为<em>"tab2"</em>项目一内容,通过<em>"mouseover"</em>触发</li>
        <li>类为<em>"tab2"</em>项目二内容,通过<em>"mouseover"</em>触发</li>
        <li>类为<em>"tab2"</em>"项目三内容,通过<em>"mouseover"</em>触发</li>
    </ul>
</div>
<script type="text/javascript">
/** 
 * 事件处理通用函数
 */
var EventUtil = {
    getEvent : function(event){
        return event ? event : window.event;
    },
    getTarget : function(event){
        return event.target||event.srcElement;
    },
    addHandler : function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent("on"+type,handler);
        }else{
            element["on"+type] = handler;
        }

    }
};

//设置选项卡切换方式
tabSwitch("tab1","click");
tabSwitch("tab2","mouseover");

/**
 * 选项卡通用函数
 */
// 传入参数inClassName设定为绑定的选项卡类名，参数triggerType设定为触发切换的类型
function tabSwitch(inClassName,triggerType){
    //取得全部选项卡区域
    if(document.querySelectorAll){
        var tabs = document.querySelectorAll("."+inClassName);
    }else{
        var divs = document.getElementsByTagName("div");
        var tabs = new Array();
        for(var k=0,lenDiv=divs.length; k<lenDiv; k++){
            if(divs[k].className.indexOf(inClassName) > -1){
                tabs.push(divs[k]);
            }
        }
    }
    //为每个选项卡建立切换功能
    for(var j=0,len=tabs.length; j<len; j++){
        //获取标题和内容列表
        var tab = tabs[j];
        //使用私有作用域为每个选项卡建立切换
        (function(){
            var nameUl = tab.getElementsByTagName("ul")[0];
            var content = tab.getElementsByTagName("ul")[1];
            //初始化选项卡
            nameUl.getElementsByTagName("li")[0].className = "selected";
            content.getElementsByTagName("li")[0].style.display = "block";
            //添加事件委托
            EventUtil.addHandler(nameUl,triggerType,function(event){
                //获取事件对象
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);
                //选项卡切换
                if(target.nodeName.toLowerCase() == "li"){
                    //分别取得标题列表项和内容列表项
                    var nameList = nameUl.getElementsByTagName("li");
                    var contentList = content.getElementsByTagName("li");
                    //标题添加selected类，并显示内容
                    for(var i=0,len=nameList.length; i<len; i++){
                        nameList[i].className = "";
                        contentList[i].style.display = "none";
                        if(nameList[i] == target){
                            nameList[i].className = "selected";
                            contentList[i].style.display = "block";
                        }
                    }
                }
            });
        })();
    }
}
</script>
</body>
</html>

下边为经典的tab.js

var TabOption = function() {
};
TabOption.prototype = {
    containerId : "",
    pageid : "",
    cid : "",
    position : top,
    action : function(b, a) {
    }
};
var TabItemOption = function() {
};
TabItemOption.prototype = {
    id : "tab_",
    title : "",
    url : "",
    isClosed : true
};
function TabView(f) {
    var a = {
        current : null,
        current_index : 0,
        current_page : null
    };
    var g = new TabOption();
    $.extend(g, f);
    var b = g.position == "bottom" ? "_bottom" : "";
    this.id = g.cid;
    this.pid = g.pageid;
    this.tabs = null;
    this.tabContainer = null;
    var c = '<table class="tab_item"  id="{0}" border="0" cellpadding="0" cellspacing="0"><tr><td class="tab_item1"></td><td class="tab_item2 tab_title">{1}</td><td class="tab_item2"><div class="tab_close"></div></td><td class="tab_item3"></td></tr></table>';
    var h = '<div class="benma_ui_tab" id="{0}"><div class="tab_hr"></div></div>';
    var i;
    if ($("#scrollContent").attr("childScrollContent") == "true") {
        i = '<iframe id="{0}" scrolling="no" allowTransparency="true" frameborder="0" width="100%" height="100%" src="{1}"></iframe>'
    } else {
        i = '<iframe id="{0}" style="overflow-x:hidden;" allowTransparency="true" frameborder="0" width="100%" height="100%" src="{1}"></iframe>'
    }
    if (g.position == "bottom") {
        c = '<table class="tab_item_bottom"  id="{0}" border="0" cellpadding="0" cellspacing="0"><tr><td class="tab_item1_bottom"></td><td class="tab_item2_bottom tab_title">{1}</td><td class="tab_item2_bottom"><div class="tab_close tab_close_bottom"></div></td><td class="tab_item3_bottom"></td></tr></table>';
        h = '<div class="benma_ui_tab benma_ui_tab_bottom" id="{0}"><div class="tab_hr tab_hr_bottom"></div></div>'
    }
    $("#" + g.containerId).append(h.replace("{0}", this.id));
    function e(n) {
        var p = $(n);
        var m = $(p).find(".tab_item1" + b);
        var l = $(p).find(".tab_item2" + b);
        var k = $(p).find(".tab_item3" + b);
        if (a.current == null || a.current != this) {
            $(p).mouseover(function() {
                m.addClass("tab_item1_mouseover" + b);
                l.addClass("tab_item2_mouseover" + b);
                k.addClass("tab_item3_mouseover" + b)
            }).mouseout(function() {
                m.removeClass("tab_item1_mouseover" + b);
                l.removeClass("tab_item2_mouseover" + b);
                k.removeClass("tab_item3_mouseover" + b)
            }).click(
                    function() {
                        if (a.current != null) {
                            $(a.current).find(".tab_item1" + b).removeClass(
                                    "tab_item1_selected" + b);
                            $(a.current).find(".tab_item2" + b).removeClass(
                                    "tab_item2_selected" + b);
                            $(a.current).find(".tab_item3" + b).removeClass(
                                    "tab_item3_selected" + b);
                            $(a.current).find(".tab_close").addClass(
                                    "tab_close_noselected")
                        }
                        m.addClass("tab_item1_selected" + b);
                        l.addClass("tab_item2_selected" + b);
                        k.addClass("tab_item3_selected" + b);
                        a.current = this;
                        $(a.current).find(".tab_close").removeClass(
                                "tab_close_noselected");
                        d($(this).attr("id"), false)
                    });
            var o = $(p).find(".tab_close").mouseover(function() {
                $(this).addClass("tab_close_mouseover")
            }).mouseout(function() {
                $(this).removeClass("tab_close_mouseover")
            }).click(function() {
                j(p.attr("id"))
            })
        }
    }
    function d(l, k) {
        if (k) {
        }
        if (a.current_page) {
            a.current_page.hide()
        }
        a.current_page = $("#page_" + l);
        a.current_page.show();
        g.action($("#" + l), a.current_page)
    }
    function j(o) {
        var n = $("#page_" + o);
        var k = $("#" + o);
        if ($(a.current).attr("id") == k.attr("id")) {
            var l = k.next();
            if (l.attr("id")) {
                $("#" + l.attr("id")).trigger("click")
            } else {
                var m = k.prev();
                if (m.attr("id")) {
                    $("#" + m.attr("id")).trigger("click")
                }
            }
        } else {
        }
        n.remove();
        k.remove()
    }
    this.init = function() {
        this.tabContainer = $("#" + this.id);
        this.tabs = this.tabContainer.find(".tab_item" + b);
        this.tabs.each(function() {
            e(this)
        })
    };
    this.add = function(n) {
        var m = new TabItemOption();
        $.extend(m, n);
        if ($("#" + m.id).length > 0) {
            this.activate(m.id);
            closeProgress()
        } else {
            if (m.title.length > 10) {
                m.title = m.title.substring(0, 10)
            }
            if (m.title.length < 4) {
                m.title = "&nbsp;&nbsp;" + m.title + "&nbsp;"
            }
            var k = i.replace("{0}", "page_" + m.id).replace("{1}", m.url);
            $("#" + this.pid).append(k);
            var l = c.replace("{0}", m.id).replace("{1}", m.title);
            this.tabContainer.append(l);
            e($("#" + m.id));
            if (!m.isClosed) {
                $($("#" + m.id)).find(".tab_close").hide()
            }
            this.activate(m.id)
        }
    };
    this.update = function(k) {
        var l = k.id;
        $("#" + l).find(".tab_title").html(k.title);
        $("#" + l).trigger("click");
        $("#page_" + l).attr("src", k.url)
    };
    this.activate = function(k) {
        $("#" + k).trigger("click")
    };
    this.close = function(k) {
        j(k)
    };
    this.init()
};

使用方法为：

<script type="text/javascript">

function tabAddHandler(mid,mtitle,murl){
    tab.update({
        id :mid,
        title :mtitle,
        url :murl,
        isClosed :true
    });
    tab.add({
        id :mid,
        title :mtitle,
        url :murl,
        isClosed :true
    });

    tab.activate(mid);
}
 var tab;   
$( function() {
     tab = new TabView( {
        containerId :'tab_menu',
        pageid :'page',
        cid :'tab1',
        position :"top"
    });
    tab.add( {
        id :'tab1_index1',
        title :"主页",
        url :"<%=basePath%>login_default.do",
        isClosed :false
    });
    /**tab.add( {
        id :'tab1_index1',
        title :"主页",
        url :"/per/undoTask!gettwo",
        isClosed :false
    });
    **/
});

    function cmainFrameT(){
        var hmainT = document.getElementById("page");
        var bheightT = document.documentElement.clientHeight;
        hmainT .style.width = '100%';
        hmainT .style.height = (bheightT  - 51) + 'px';
    }
    cmainFrameT();
    window.onresize=function(){  
        cmainFrameT();
    };

</script>