tab导航切换关闭(原创)

Html

Css

123123123123

  body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
	margin:0;
	padding:0;
}
body,button,input,select,textarea {
	font:12px/1.5tahoma,arial,\5b8b\4f53;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
}
address,cite,dfn,em,var {
	font-style:normal;
}
code,kbd,pre,samp {
	font-family:couriernew,courier,monospace;
}
small {
	font-size:12px;
}
ul,ol {
	list-style:none;
}
a {
	text-decoration:none;
	color:#000;
}
a:hover {
	text-decoration:none!important;
}
sup {
	vertical-align:text-top;
}
sub {
	vertical-align:text-bottom;
}
legend {
	color:#000;
}
fieldset,img {
	border:0;
}
button,input,select,textarea {
	font-size:100%;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
#rightcont {
	position:absolute;
	display:none;
	top:10px;
	left:200px;
}
#rightcont li {
	height:30px;
	border-bottom:1px solid #95B8E7;
	width:125px;
	background:#E0ECFF;
	text-align:center;
	line-height:30px;
}
#rightcont li:hover {
	background:#F2F7FF;
}
#tab .tabul {
	width:100%;
	height:27px;
	background:#E0ECFF;
	padding-left:4px;
	padding-top:2px;
	margin:0px;
	border-bottom:1px solid #95B8E7;
}
#tab .tabul li {
	height:27px;
	margin:0 4px -1px 0;
	float:left;
}
#tab .tabul li a:nth-of-type(1) {
	padding:0 10px;
	height:25px;
	line-height:25px;
	display:inline-block;
	border:1px solid #95B8E7;
	border-radius:3px;
	font-size:14px;
}
#tab .tabul li a:nth-of-type(1) i {
	padding-left:4px;
	font-size:12px;
}

this.xian = function(index) {
        that.dom.find("ul li").eq(index).find('a').css({
            background: '#F6FAFF',
            borderBottomColor: '#fff'
        }).parent('li').siblings().find('a').css({
            background: '#E0ECFF',
            borderBottomColor: '#95B8E7'
        });
        that.dom.find("#cont .content").eq(index).css({
            display: 'block'
        }).siblings().css({
            display: 'none'
        })
    }
    this.you = function(dom1, dom) {
        var arr = ['关闭左标签页', '关闭右标签页', '关闭其它', '全部关闭']
        let rightstr = ''
        for (let r in arr) {
            rightstr = rightstr + '<li>' + arr[r] + '</li>'
        }
        //	    console.log(rightstr)
        $('#rightcont').html("<ul>" + rightstr + "</ul>")

dom.on('contextmenu', function(e) {
            e.preventDefault();
            console.log(e.target, '右击的位置')
            console.log($(e.target).parents('tr'))
            $(".clickbg").removeClass('clickbg')
            if ($(e.target).parents('tr').length) {
                $(e.target).parents('tr').addClass('clickbg')
            } else {
                $(e.target).addClass('clickbg')
            }
            $('#rightcont').css({
                top: e.pageY,
                left: e.pageX,
                display: 'block',
                zIndex: 100
            })
            // console.log($('#rightcont')[0])
            $('#rightcont').find('li').off()
            $('#rightcont').find('li').each((j, jt) => {
                $(jt).on('click', function() {
                    dom1.find('ul li').each((i, it) => {
                        if (it == dom[0]) {
                            console.log(i)
                            dom1.find('ul li').each((m, mt) => {
                                if ($(this).html() == '关闭左标签页') {
                                    if (m < i && m != 0) {
                                        $(mt).find("a i").trigger("click");
                                        that.xian(0)
                                    }

} else if ($(this).html() == '关闭右标签页') {
                                    if (m > i && m != 0) {
                                        $(mt).find("a i").trigger("click");
                                        that.xian(0)
                                    }
                                } else if ($(this).html() == '关闭其它') {
                                    if (m != i && m != 0) {
                                        $(mt).find("a i").trigger("click");
                                        that.xian(0)
                                    }
                                } else if ($(this).html() == '全部关闭') {
                                    if (m != 0) {
                                        $(mt).find("a i").trigger("click");
                                        that.xian(0)
                                    }
                                }
                            })
                        }
                    })

$('#rightcont').css({
                        display: 'none'
                    })
                })
            })
        })
        $("body").on('click', function() {
            $(this).find("#rightcont").css({
                display: 'none'
            })
            $(".clickbg").removeClass('clickbg')
        })
    }

}
var n = new tabjs($('#tab'), {})
n.adddom({
    title: '首页',
    close: false
}, function(dom) {
    dom.html("首页")
})
var i = 1
var i = 1
$('button').on("click", function() {
    n.adddom({
        title: '第' + i + '页',
        close: true
    }, function(dom) {
        dom.html('第' + i + '页')
    })
    i++
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

tab导航切换关闭(原创)

代码描述：tab导航增加与删除

自己写的不好，有啥问题大家指正，指正。

6

最新

发表评论全部评论

暂时没有评论！

hehe0

2018/7/18 17:59:53

右键点击关闭全部

hehe0

2018/7/18 18:00:24

应该从1开始的吧。。怎么接着继续数字开始呢。。

I I I0

2018/8/22 17:22:12

上面的标签信息是自定义的，可以自己设置，这说明每次点击按钮的时候创建的都是新的tab;

回复

I I I0

2018/5/30 17:52:07

好的啊

I I I0

2018/6/1 14:19:02

写的就是菜啊，还指正啥。

I I I0

2018/6/1 14:19:55

都是正联兄弟

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

I I I

相关代码

tab导航切换关闭(原创)

最新