Html实现添加、删除、右键菜单

1、html实现添加、删除、右键菜单如何实现一个右键菜单效果，这在初级前端学习中是一个频繁的实例，divcss小编实现代码如下： .tabs width:800px; margin:150px auto; .tab-header position: relative; height: 40px; line-height: 40px; background: fafafa; border-bottom: solid 2px 39aef5; overflow: hidden; .tab-left, .tab-right position: absolute; top: 0; width: 40px;

2、height: 40px; text-align: center; color: 888; background-color: ffffff; cursor: pointer; z-index: 1000; .tab-left left: 0; border-right: solid 1px eee; .tab-right right: 0; border-left: solid 1px eee; .tabs-wrap position: relative; overflow: hidden; margin: 0 40px; .tabs-wrap ul list-style-type: non

3、e; height: 40px; margin: 0; padding: 0; font-size: 14px; width: 5000px; .tabs-wrap ul li float: left; display: inline-block; .tabs-wrap ul li a display: block; border-right: solid 1px eee; padding: 0 15px; color: 888; .tabs-wrap ul li.active a background-color: 39aef5; color: fff; .tabs-wrap ul li a

4、:hover text-decoration: none; 首页 刷新 关闭所有选项卡 关闭其他选项卡 关闭右边其他选项卡 关闭左边其他选项卡 添加tabs1 添加tabs2 添加tabs3 添加tabs4 添加tabs5 添加tabs6 添加tabs7 添加tabs8 添加tabs9 /猎取所有的tab标签的宽度 function getcontentwidth(c) var w = 0; c.children().each(function() w += $(this).outerwidth(true); ); return w; / 推断tab是否已存在function tabrepea

5、t(id) var li = $(".tabs-content li"); var isrepeat = false; $.each( li , function (i,n) if($(n).attr("data-id") = id) isrepeat = true; return false; ); return isrepeat; /添加tab办法function addtab(id, title, content) var ul = $(".tabs-content"); var

6、panels = $(".tab-panel"); var tab; / 假如tab标题已存在，就打开当前标签页并返回 if (tabrepeat(id) tab = $(".tabs-content lidata-id=" + id + ""); scrollselected(tab); else /创建tab tab = $( '' + '' + title + ' ' + '' ); /创建tab面板 var tabp

7、anel = $( '' + content + '' ); /将tab和tab面板添加到页面 tab.appendto(ul); tabpanel.appendto(panels); /假如标签过多，就滚动标签容器使标签显示 var tabswidth = getcontentwidth(ul); tabswidth > $(".tabs-wrap").width() && ul.animate( "margin-left" : $(&quot

8、;.tabs-wrap").width() - tabswidth ); /选中tab selecttab(tab); /选中标签页function selecttab(self) /全部的tab取消选中 $(".tabs-content li").removeclass("active"); /躲藏全部的面板 $(".panel-content ").hide(); /选中时显示选中的标签页 self.addclass("active&quo

9、t;); var id = self.attr("data-id"); $(".panel-contentdata-id="+ id + "").show(); return false; /选中时移动tabfunction scrollselected(self) var w= parseint(self.css("width"); var ul = $(".tabs-content"); var ulleft =

10、 parseint( ul.css("margin-left"); var wapw = $(".tabs-wrap").width(); var tabswidth = getcontentwidth(ul); var prveall = self.prevall(); var nextall = self.nextall(); var prveallwidth = 0; var nextallwidth = 0; var newleft; $.each(prveall,function(i , n) prveallwi

11、dth += parseint($(n).css("width") ); $.each(nextall,function(i , n) nextallwidth += parseint($(n).css("width") ); if(prveallwidth + w wapw - w ) ul.animate( "margin-left": newleft ) /删除标签页function closetab(self) var li = self.parents("li

12、"); var id = li.attr("data-id"); var nextli = li.next(); var prevli = li.prev(); var w = li.width(); var ul = $(".tabs-content"); var tabconleft = parseint(ul.css("margin-left"); /删除标签和面板 li.remove(); $(".panel-contentdata-id=&a

13、mp;quot;+ id + "").remove(); /删除标签页时显示其他标签页 if(li.hasclass("active") && nextli.size() = 0 ) prevli.addclass("active"); $(".panel-contentdata-id="+ prevli.attr("data-id") + "").

14、show(); else if(li.hasclass("active") && nextli.size() != 0) nextli.addclass("active"); $(".panel-contentdata-id="+ nextli.attr("data-id") + "").show(); return false /需要时滚动标签 tabconleft 0 ? 0 :

15、tabconleft + w ); /绑定点击大事function bindevents(self) self.unbind().bind("click", function (e) var left = 200; var ul = $(".tabs-content"); var ulleft = parseint(ul.css("margin-left"); var tabswidth = getcontentwidth(ul); if ($(e.target).hasclass(&a

16、mp;quot;tab-left") | $(e.target).parent().hasclass("tab-left") ulleft $(".tabs-wrap").width() - tabswidth && scrollby(-left) else if($(e.target).hasclass("tab-close") closetab($(e.target) else var li = $(e.target).closest

17、('li'); if(li.length) selecttab(li); return false ).on('contextmenu','li',function(e) e.preventdefault(); selecttab($(this); $(".rightmenu").css( display: 'block', left: e.pagex, top: e.pagey ); ); tabrightmenueven(); /设置标签滚动function scrollby(left) var ul = $(".tabs-content"); var ulleft = parseint(ul.css("margin-left"); var tabswidth = getcontentwidth(ul); var newleft = ulleft + left; if(newleft > 0 ) newleft = 0 else