选项卡html怎么做管理者,如何在一个HTML页面中管理两个选项卡？

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%;

}

}

• car
• motor

ss

555

• person
• company

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%;

}

}

• car
• motor

ss

555

• person
• company

ss

555