选项卡html怎么做管理者,如何在一个HTML页面中管理两个选项卡?
发布日期:2021-08-28 13:15:28 浏览次数:10 分类:技术文章

本文共 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:asp.net mvc 压缩html代码,ASP.NET MVC中使用Bundle打包压缩js和css的方法
下一篇:html div调用js,在div中调用javascript函数

发表评论

最新留言

留言是一种美德,欢迎回访!
[***.207.175.100]2024年03月11日 15时29分31秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

python画多层网络_在pymn中修改多层网络图 2019-04-21
java net 安卓_android -------- java.net.UnknownServiceException 2019-04-21
java 密钥 aes 解密_Java中AES加密解密以及签名校验 2019-04-21
java树转化成图_Java 转换一组数据为树型数据 2019-04-21
java 底层ppt_Java 如何设置 PPT 中的形状排列方式 具体内容 2019-04-21
mysql service5.7_Mysql5.7服务下载安装 2019-04-21
mysql查看线程完整执行命令_MySQL-查看运行的线程-SHOW PROCESSLIST 2019-04-21
mysql 更新数据 字符串_批量替换 MySQL 指定字段中的字符串 2019-04-21
web开发 mysql安装_mysqlinstallerwebcommunity5.7.21.0.msi安装图文教程 2019-04-21
mysql concat 整数型_MySQL 数字类型转换函数(concat/cast) 2019-04-21
mysql单元格函数是_MySQL常用内置函数 2019-04-21
mysql 怎么字段分裂_你可以分裂/爆炸MySQL查询中的字段吗? 2019-04-21
mysql server卸载出错_Mysql卸载问题Start Server卡住报错解决方法 2019-04-21
c语言课程设计工资管理建库,C语言课程设计工资管理系统参考.doc 2019-04-21
c语言case中途跳出,break语句在switch结构语句中的作用是终止某个case,并跳出switch结构语句。... 2019-04-21
C语言编写程序计算高考倒计时天数,基于51单片机LCD12864大字符校时万年历带高考倒计时程序... 2019-04-21
普职融通信息技术课本C语言,“三步走”扎实推进“普职融通”办学新模式 2019-04-21
Android多个签名,【Android】Android批量重签名 2019-04-21
html unicode编码转换,JS实现的Unicode编码转换操作示例 2019-04-21
html页面角落放动漫人物,L2Dwidget.js L2D网页动画人物添加 2019-04-21