这篇文章将为大家详细讲解有关如何使用Html实现添加、删除、右键菜单，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">
<!--jquery 1.11.3-->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<style>
.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;
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: none;
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:hover{
text-decoration: none;
}
</style>
</head>
<body>
<div class="tabs" id="tabs">
<!--标签页导航条-->
<div class="tab-header">
<!--左边按钮-->
<a class="tab-left">
<i class="fa fa-backward"></i>
</a>
<!--右边按钮-->
<a class="tab-right">
<i class="fa fa-forward"></i>
</a>
<div class="tabs-wrap">
<!--标签页内容-->
<ul class="tabs-content">
<li class="active" data-id="0"><a href="#">首页</a></li>
</ul>
</div>
</div>
<!--标签页内容-->
<div class="tab-panel" id="tab-panel">
<div class="panel-content" data-id="0">
<iframe class="myiframe" name="iframe0" scrolling="auto" width="100%" height="100%" src="view/home.html" frameborder="0"></iframe>
</div>
</div>
</div>
<ul class="dropdown-menu Rightmenu">
<li class="tabUpdate"><a>刷新</a></li>
<li class="divider"></li>
<li class="tabCloseAll"><a>关闭全部选项卡</a></li>
<li class="divider"></li>
<li class="tabCloseOther"><a>关闭其他选项卡</a></li>
<li class="divider"></li>
<li class="tabnextClose"><a>关闭右边其他选项卡</a></li>
<li class="divider"></li>
<li class="tabprevClose"><a>关闭左边其他选项卡</a></li>
</ul>
<a class="btn btn-primary btn-lg" data-id="1" style="margin-left: 100px">添加TABS1</a>
<a class="btn btn-primary btn-lg" data-id="2" style="">添加TABS2</a>
<a class="btn btn-primary btn-lg" data-id="3" style="">添加TABS3</a>
<a class="btn btn-primary btn-lg" data-id="4" style="">添加TABS4</a>
<a class="btn btn-primary btn-lg" data-id="5" style="">添加TABS5</a>
<a class="btn btn-primary btn-lg" data-id="6" style="">添加TABS6</a>
<a class="btn btn-primary btn-lg" data-id="7" style="">添加TABS7</a>
<a class="btn btn-primary btn-lg" data-id="8" style="">添加TABS8</a>
<a class="btn btn-primary btn-lg" data-id="9" style="">添加TABS9</a>
<script >
//获取全部的tab标签的宽度
function getContentWidth(c){
var w = 0;
c.children().each(function(){
w += $(this).outerWidth(true);
});
return w;
}
// 判断tab是否已存在
function tabRepeat(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 panels = $(".tab-panel");
var tab;
// 如果tab标题已存在，就打开当前标签页并返回
if (tabRepeat(id)) {
tab = $(".tabs-content li[data-id=" + id + "]");
scrollSelected(tab);
} else {
//创建tab
tab = $(
'<li data-id = "' + id + '">' +
'<a href="javascript:void(0)">' +
title +
' <i class="fa fa-times-circle tab-close"></i></a>' +
'</li>'
);
//创建tab面板
var tabPanel = $(
'<div class="panel-content" data-id="'+ id +'">' +
content +
'</div>'
);
//将tab和tab面板添加到页面
tab.appendTo(ul);
tabPanel.appendTo(panels);
//如果标签过多，就滚动标签容器使标签显示
var tabsWidth = getContentWidth(ul);
tabsWidth > $(".tabs-wrap").width() && ul.animate({
"margin-left" : $(".tabs-wrap").width() - tabsWidth
});
}
//选中tab
selectTab(tab);
}
//选中标签页
function selectTab(self){
//所有的tab取消选中
$(".tabs-content li").removeClass("active");
//隐藏所有的面板
$(".panel-content ").hide();
//选中时显示选中的标签页
self.addClass("active");
var id = self.attr("data-id");
$(".panel-content[data-id="+ id + "]").show();
return false;
}
//选中时移动Tab
function scrollSelected(self){
var w= parseInt(self.css("width"));
var ul = $(".tabs-content");
var ulLeft = 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){
prveallwidth += parseInt($(n).css("width"))
});
$.each(nextall,function(i , n){
nextallwidth += parseInt($(n).css("width"))
});
if(prveallwidth + w < wapW){
newleft = 0
}else if( nextallwidth < wapW ){
newleft = wapW - tabsWidth
}else{
newleft = -prveallwidth + wapW/2
}
if( prveallwidth < -ulLeft || prveallwidth > wapW - w ){
ul.animate({
"margin-left": newleft
})
}
}
//删除标签页
function closeTab(self){
var li = self.parents("li");
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-content[data-id="+ id + "]").remove();
//删除标签页时显示其他标签页
if(li.hasClass("active") && nextLI.size() == 0 ){
prevLI.addClass("active");
$(".panel-content[data-id="+ prevLI.attr("data-id") + "]").show();
}else if(li.hasClass("active") && nextLI.size() != 0){
nextLI.addClass("active");
$(".panel-content[data-id="+ nextLI.attr("data-id") + "]").show();
return false
}
//需要时滚动标签
tabConLeft < 0 && ul.animate({
"margin-left": tabConLeft + w > 0 ? 0 : 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("tab-left") || $(e.target).parent().hasClass("tab-left")) {
ulLeft < 0 && scrollBy(left);
} else if ($(e.target).hasClass("tab-right") || $(e.target).parent().hasClass("tab-right")) {
ulLeft > $(".tabs-wrap").width() - tabsWidth && scrollBy(-left)
} else if($(e.target).hasClass("tab-close")){
closeTab($(e.target))
}else{
var li = $(e.target).closest('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 if(newLeft < $(".tabs-wrap").width() - tabsWidth){
newLeft = $(".tabs-wrap").width() - tabsWidth
}
ul.animate({
"margin-left": newLeft
})
}
//绑定右键菜单事件
function tabRightmenuEven() {
//离开选项卡时，隐藏右键菜单
$(".Rightmenu").on('mouseleave',function(){
$(this).hide();
return false;
});
$(".sidebar, .main, .top-navbar").mouseover(function(){
$(".Rightmenu").hide();
});
//刷新
$('.tabUpdate').click(function () {
var tabs = $(".tabs-content li");
tabs.each(function (i, n) {
if ($(n).hasClass("active")) {
var id = $(n).attr("data-id");
//用js调用强制刷新
$(".panel-content[data-id = '"+ id +"'] iframe").attr('src', $(".panel-content[data-id = '"+ id +"'] iframe").attr('src'));
}
});
$(".Rightmenu").hide();
return false;
});
//关闭全部
$(".tabCloseAll").click(function () {
var tabs = $(".tabs-content li");
$.each( tabs, function( i , n){
var id = $(n).attr("data-id");
if(id != 0){
$(n).remove();
$(".panel-content[data-id = '"+ id +"']").remove();
}else{
$(n).addClass("active");
$(".panel-content[data-id = '"+ id +"']").show();
}
});
$(".Rightmenu").hide();
return false;
});
//关闭其他页面
$(".tabCloseOther").click(function () {
var tabs = $(".tabs-content li");
tabs.parent().css("margin-left", "0px");
tabs.each(function (i, n) {
if (i != 0 && !$(n).hasClass("active")) {
var id = $(n).attr("data-id");
$(n).remove();
$(".panel-content[data-id = '"+ id +"']").remove();
}
});
$(".Rightmenu").hide();
return false;
});
//关闭当前tab之前的所有页面
$(".tabprevClose").click(function () {
var tab = $(".tabs-content li.active");
var prevalltab = tab.prevAll();
var ulLeft = parseInt(tab.parent().css("margin-left"));
prevalltab.each(function (i, n) {
if (i != prevalltab.length-1) {
var id = $(n).attr("data-id");
$(n).remove();
$(".panel-content[data-id = '"+ id +"']").remove();
}
});
ulLeft < 0 && tab.parent().animate({ "margin-left" : 0 });
$(".Rightmenu").hide();
return false;
});
//关闭当前tab之后的所有页面
$(".tabnextClose").click(function () {
var tab = $(".tabs-content li.active");
var nextalltab = tab.nextAll();
var ulLeft = parseInt(tab.parent().css("margin-left"));
var wapW = $(".tabs-wrap").width();
nextalltab.each(function (i, n) {
var id = $(n).attr("data-id");
$(n).remove();
$(".panel-content[data-id = '" + id + "']").remove();
});
var tabs = $(".tabs-content li");
var tabsW = 0;
tabs.each(function(z,x){
tabsW += parseInt($(x).css("width"));
});
if(ulLeft < 0 ){
tab.parent().animate({
"margin-left" : tabsW < wapW ? 0 : wapW - tabsW
});
}
$(".Rightmenu").hide();
return false;
});
}
</script>
<script>
$(function(){
$(".btn").click(function(){
var id = $(this).attr("data-id");
var title = $(this).text();
var content = '<iframe class="myiframe" scrolling="auto" width="100%" height="100%" src="view/home.html" frameborder="0"></iframe>';
addTab(id,title,content);
bindEvents($(".tab-header"));
return false
});
})
</script>
</body>
</html>
关于“如何使用Html实现添加、删除、右键菜单”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
