ss
555
本文共 8974 字,大约阅读时间需要 29 分钟。
I have code for manage one tab. But now I want to add another tab to that page. How I can do It for manage two seprate tab withought effecting together? First tab is for manage a box and other tab for manage other tab.
我有管理一个标签的代码。但现在我想在该页面上添加另一个标签。我怎么做才能管理两个单独的选项卡一起影响?第一个选项卡用于管理框,其他选项卡用于管理其他选项卡。
I put my code in 'code snippet':
我把我的代码放在'代码段'中:
window.onload = function () {
var classname = document.getElementsByClassName("tabitem");
var boxitem = document.getElementsByClassName("box");
var clickFunction = function (e) {
e.preventDefault();
var a = this.getElementsByTagName("a")[0];
var span = this.getElementsByTagName("span")[0];
var href = a.getAttribute("href").replace("#", "");
for (var i = 0; i < boxitem.length; i++) {
boxitem[i].className = boxitem[i].className.replace(/(?:^|\s)show(?!\S)/g, '');
}
document.getElementById(href).className += " show";
for (var i = 0; i < classname.length; i++) {
classname[i].className = classname[i].className.replace(/(?:^|\s)active(?!\S)/g, '');
}
this.className += " active";
span.className += 'active';
var left = a.getBoundingClientRect().left;
var top = a.getBoundingClientRect().top;
var consx = (e.clientX - left);
var consy = (e.clientY - top);
span.style.top = consy + "px";
span.style.left = consx + "px";
span.className = 'clicked';
span.addEventListener('webkitAnimationEnd', function (event) {
this.className = '';
}, false);
};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', clickFunction, false);
}
}
.toolbar {
background: #03A9F4;
}
.tabs {
padding-top: 1%;
}
.tabs ul {
list-style: none;
margin: 0;
width: 100%;
overflow: hidden;
padding: 0;
}
.tabs ul li {
float: right;
width: 50%;
}
.tabs a {
position: relative;
color: white;
text-decoration: none;
display: block;
width: 100%;
text-align: center;
line-height: 40px;
font-weight: 500;
font-size: 13px;
color: #ecf0f1;
overflow: hidden;
}
.tabs .active a {
color: #fff;
}
.tabs .active a:after {
height: 2px;
width: 100%;
display: block;
content: " ";
bottom: 0px;
left: 0px;
position: absolute;
background: #f57c00;
-webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
-moz-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
}
.tabs a span {
position: absolute;
margin-left: -40px;
margin-top: -24px;
width: 80%;
background: #f57c00;
height: 100%;
display: block;
border-radius: 50%;
opacity: 0;
}
.tabs a span.clicked {
-webkit-animation: expand 0.6s cubic-bezier(0.1, 0.0, 0.4, 1) 0s normal;
-moz-animation: expand 0.6s cubic-bezier(0.1, 0.0, 0.4, 1) 0s normal;
border-bottom: 2px solid #f57c00;
}
.content {
box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
height: auto;
padding-top: 50px;
position: relative;
top: 0px;
overflow: hidden;
}
.box {
display: none;
overflow: auto;
position: relative;
overflow-x: hidden;
}
.box.show {
display: block;
}
.box2 {
display: none;
overflow: auto;
position: relative;
overflow-x: hidden;
}
.box2.show {
display: block;
}
@-webkit-keyframes expand {
0% {
/*background: rgba(255,255,141,1);*/
/*opacity: 1;*/
border-radius: 100%;
/*transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);*/
}
50% {
/*background: rgba(255,255,141,0.8);*/
border-radius: 50%;
}
100% {
/*background: rgba(255,255,141,0);*/
/*transform: scale(3);*/
border-radius: 0;
/*-webkit-transform: scale(3);
-moz-transform: scale(3);
opacity: 1;*/
}
}
@-moz-keyframes expand {
0% {
/*background: rgba(255,255,141,1);*/
/*opacity: 1;*/
border-radius: 100%;
/*transform: scale(0);
-moz-transform: scale(0);*/
}
50% {
/*background: rgba(255,255,141,0.8);*/
border-radius: 50%;
}
100% {
/*background: rgba(255,255,141,0);*/
/*transform: scale(3);*/
border-radius: 0;
/*-moz-transform: scale(3);
opacity: 1;*/
}
}
@-webkit-keyframes border-expand {
0% {
opacity: 0;
width: 0;
}
100% {
opacity: 1;
width: 100%;
}
}
@-moz-keyframes border-expand {
0% {
opacity: 0;
width: 0;
}
100% {
opacity: 1;
width: 100%;
}
}
ss
555
ss
555
1 个解决方案
#1
I find a solve :)
我找到了解决:)
window.onload = function () {
$(".tabitem2 a").click(function () {
var classname = document.getElementsByClassName("tabitem2");
var boxitem = document.getElementsByClassName("box2");
var clickFunction = function (e) {
e.preventDefault();
var a = this.getElementsByTagName("a")[0];
var span = this.getElementsByTagName("span")[0];
var href = a.getAttribute("href").replace("#", "");
for (var i = 0; i < boxitem.length; i++) {
boxitem[i].className = boxitem[i].className.replace(/(?:^|\s)show(?!\S)/g, '');
}
document.getElementById(href).className += " show";
for (var i = 0; i < classname.length; i++) {
classname[i].className = classname[i].className.replace(/(?:^|\s)active(?!\S)/g, '');
}
this.className += " active";
span.className += 'active';
var left = a.getBoundingClientRect().left;
var top = a.getBoundingClientRect().top;
var consx = (e.clientX - left);
var consy = (e.clientY - top);
span.style.top = consy + "px";
span.style.left = consx + "px";
span.className = 'clicked';
span.addEventListener('webkitAnimationEnd', function (event) {
this.className = '';
}, false);
};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', clickFunction, false);
}
});
$(".tabitem a").click(function () {
var classname = document.getElementsByClassName("tabitem");
var boxitem = document.getElementsByClassName("box");
var clickFunction = function (e) {
e.preventDefault();
var a = this.getElementsByTagName("a")[0];
var span = this.getElementsByTagName("span")[0];
var href = a.getAttribute("href").replace("#", "");
for (var i = 0; i < boxitem.length; i++) {
boxitem[i].className = boxitem[i].className.replace(/(?:^|\s)show(?!\S)/g, '');
}
document.getElementById(href).className += " show";
for (var i = 0; i < classname.length; i++) {
classname[i].className = classname[i].className.replace(/(?:^|\s)active(?!\S)/g, '');
}
this.className += " active";
span.className += 'active';
var left = a.getBoundingClientRect().left;
var top = a.getBoundingClientRect().top;
var consx = (e.clientX - left);
var consy = (e.clientY - top);
span.style.top = consy + "px";
span.style.left = consx + "px";
span.className = 'clicked';
span.addEventListener('webkitAnimationEnd', function (event) {
this.className = '';
}, false);
};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', clickFunction, false);
}
});
}
.toolbar {
background: #03A9F4;
}
.tabs {
padding-top: 1%;
}
.tabs ul {
list-style: none;
margin: 0;
width: 100%;
overflow: hidden;
padding: 0;
}
.tabs ul li {
float: right;
width: 50%;
}
.tabs a {
position: relative;
color: white;
text-decoration: none;
display: block;
width: 100%;
text-align: center;
line-height: 40px;
font-weight: 500;
font-size: 13px;
color: #ecf0f1;
overflow: hidden;
}
.tabs .active a {
color: #fff;
}
.tabs .active a:after {
height: 2px;
width: 100%;
display: block;
content: " ";
bottom: 0px;
left: 0px;
position: absolute;
background: #f57c00;
-webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
-moz-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
}
.tabs a span {
position: absolute;
margin-left: -40px;
margin-top: -24px;
width: 80%;
background: #f57c00;
height: 100%;
display: block;
border-radius: 50%;
opacity: 0;
}
.tabs a span.clicked {
-webkit-animation: expand 0.6s cubic-bezier(0.1, 0.0, 0.4, 1) 0s normal;
-moz-animation: expand 0.6s cubic-bezier(0.1, 0.0, 0.4, 1) 0s normal;
border-bottom: 2px solid #f57c00;
}
.content {
box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
height: auto;
padding-top: 50px;
position: relative;
top: 0px;
overflow: hidden;
}
.box {
display: none;
overflow: auto;
position: relative;
overflow-x: hidden;
}
.box.show {
display: block;
}
.box2 {
display: none;
overflow: auto;
position: relative;
overflow-x: hidden;
}
.box2.show {
display: block;
}
@-webkit-keyframes expand {
0% {
/*background: rgba(255,255,141,1);*/
/*opacity: 1;*/
border-radius: 100%;
/*transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);*/
}
50% {
/*background: rgba(255,255,141,0.8);*/
border-radius: 50%;
}
100% {
/*background: rgba(255,255,141,0);*/
/*transform: scale(3);*/
border-radius: 0;
/*-webkit-transform: scale(3);
-moz-transform: scale(3);
opacity: 1;*/
}
}
@-moz-keyframes expand {
0% {
/*background: rgba(255,255,141,1);*/
/*opacity: 1;*/
border-radius: 100%;
/*transform: scale(0);
-moz-transform: scale(0);*/
}
50% {
/*background: rgba(255,255,141,0.8);*/
border-radius: 50%;
}
100% {
/*background: rgba(255,255,141,0);*/
/*transform: scale(3);*/
border-radius: 0;
/*-moz-transform: scale(3);
opacity: 1;*/
}
}
@-webkit-keyframes border-expand {
0% {
opacity: 0;
width: 0;
}
100% {
opacity: 1;
width: 100%;
}
}
@-moz-keyframes border-expand {
0% {
opacity: 0;
width: 0;
}
100% {
opacity: 1;
width: 100%;
}
}
ss
555
ss
555
转载地址:https://blog.csdn.net/weixin_33959449/article/details/117833642 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!