帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» TAB导航切换关闭(精选)
TAB导航切换关闭(精选)
浏览:754次
-
评论:0次
-
发布时间:2018-05-28
Html
Css
Js
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; }
function tabjs(dom, data) { this.dom = dom; var that = this let ul = $("
") let div = $("
") div.css({ paddingTop: 5 }) this.dom.append(ul); this.dom.append(div); this.adddom = function(title, callback) { //添加tab时,如果相同,就打开上次的点 let guo = true that.dom.find('.tabul li').each((e, em) => { if ($(em).data('title') == title.title) { that.xian(e) console.log(12312312312) guo = false return } }) if (!guo) { return } let li = $("
"); li.data('title', title.title) if (title.close) { li.html("
" + title.title + "
x
") // li.append("") } else { li.html("
" + title.title + "
") } ul.append(li); let div1 = $("
") callback(div1) div.append(div1) // console.log(li) that.dom.find("ul li").each((i, it) => { if (it == li[0]) { // console.log(i,it,"所要显示的") that.xian(i) } }) li.on('click', function() { // console.log(this) that.dom.find("ul li").each((i, it) => { if (it == this) { that.xian(i) } }) }) li.find('a i').on('click', function() { li.remove(); div1.remove(); that.xian(0) }) this.you(dom, li) } 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 + '
' + arr[r] + '
' } // console.log(rightstr) $('#rightcont').html("
" + rightstr + "
") 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
<!doctype html><html><head><meta charset="utf-8"><title>TAB导航切换关闭(精选)-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:tab导航增加与删除
自己写的不好,有啥问题大家指正,指正。
在线抽奖 随机选取 自动挑选
原生JS拖拽事件,碰撞检测(碰撞变色效果)
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
754
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值