溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何使用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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
