如何實(shí)現(xiàn)一個(gè)html' target='_blank'>右鍵菜單效果，這在初級(jí)前端學(xué)習(xí)中是一個(gè)常見的實(shí)例，divcss小編實(shí)現(xiàn)代碼如下：
<!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/K68vbdEjh4u" 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"
<!--標(biāo)簽頁導(dǎo)航條--
<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"
<!--標(biāo)簽頁內(nèi)容--
<ul class="tabs-content"
<li class="active" data-id="0"<a href="#"首頁</a</li
</ul
</div
</div
<!--標(biāo)簽頁內(nèi)容--
<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關(guān)閉全部選項(xiàng)卡</a</li
<li class="divider"</li
<li class="tabCloseOther"<a關(guān)閉其他選項(xiàng)卡</a</li
<li class="divider"</li
<li class="tabnextClose"<a關(guān)閉右邊其他選項(xiàng)卡</a</li
<li class="divider"</li
<li class="tabprevClose"<a關(guān)閉左邊其他選項(xiàng)卡</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標(biāo)簽的寬度
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標(biāo)題已存在，就打開當(dāng)前標(biāo)簽頁并返回
if (tabRepeat(id)) {
tab = $(".tabs-content li[data-id=" + id + "]");
scrollSelected(tab);
} else {
//創(chuàng)建tab
tab = $(
'<li data-id = "' + id + '"' +
'<a href="javascript:void(0)"' +
title +
' <i class="fa fa-times-circle tab-close"</i</a' +
'</li'
);
//創(chuàng)建tab面板
var tabPanel = $(
'<div class="panel-content" data-id="'+ id +'"' +
content +
'</div'
);
//將tab和tab面板添加到頁面
tab.appendTo(ul);
tabPanel.appendTo(panels);
//如果標(biāo)簽過多，就滾動(dòng)標(biāo)簽容器使標(biāo)簽顯示
var tabsWidth = getContentWidth(ul);
tabsWidth $(".tabs-wrap").width() && ul.animate({
"margin-left" : $(".tabs-wrap").width() - tabsWidth
});
}
//選中tab
selectTab(tab);
}
//選中標(biāo)簽頁
function selectTab(self){
//所有的tab取消選中
$(".tabs-content li").removeClass("active");
//隱藏所有的面板
$(".panel-content ").hide();
//選中時(shí)顯示選中的標(biāo)簽頁
self.addClass("active");
var id = self.attr("data-id");
$(".panel-content[data-id="+ id + "]").show();
return false;
}
//選中時(shí)移動(dòng)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
})
}
}
//刪除標(biāo)簽頁
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"));
//刪除標(biāo)簽和面板
li.remove();
$(".panel-content[data-id="+ id + "]").remove();
//刪除標(biāo)簽頁時(shí)顯示其他標(biāo)簽頁
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
}
//需要時(shí)滾動(dòng)標(biāo)簽
tabConLeft < 0 && ul.animate({
"margin-left": tabConLeft + w 0 ? 0 : tabConLeft + w
});
}
//綁定點(diǎn)擊事件
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();
}
//設(shè)置標(biāo)簽滾動(dòng)
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() {
//離開選項(xiàng)卡時(shí)，隱藏右鍵菜單
$(".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調(diào)用強(qiáng)制刷新
$(".panel-content[data-id = '"+ id +"'] iframe").attr('src', $(".panel-content[data-id = '"+ id +"'] iframe").attr('src'));
}
});
$(".Rightmenu").hide();
return false;
});
//關(guān)閉全部
$(".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;
});
//關(guān)閉其他頁面
$(".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;
});
//關(guān)閉當(dāng)前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;
});
//關(guān)閉當(dāng)前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
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
新聞熱點(diǎn)
疑難解答
圖片精選
