i have code manage 1 tab. want add tab page. how can manage 2 seprate tab withought effecting together? first tab manage box , other tab manage other tab.
i put code in 'code snippet':
window.onload = function () { var classname = document.getelementsbyclassname("tabitem"); var boxitem = document.getelementsbyclassname("box"); var clickfunction = function (e) { e.preventdefault(); var = this.getelementsbytagname("a")[0]; var span = this.getelementsbytagname("span")[0]; var href = a.getattribute("href").replace("#", ""); (var = 0; < boxitem.length; i++) { boxitem[i].classname = boxitem[i].classname.replace(/(?:^|\s)show(?!\s)/g, ''); } document.getelementbyid(href).classname += " show"; (var = 0; < 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); }; (var = 0; < 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 { 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 { 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: 1s cubic-bezier(0.4, 0.0, 1, 1); } .tabs span { position: absolute; margin-left: -40px; margin-top: -24px; width: 80%; background: #f57c00; height: 100%; display: block; border-radius: 50%; opacity: 0; } .tabs 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%; } } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toolbar"> <div class="tabs"> <ul> <li class="tabitem active"><a href="#box1">car<span></span></a></li> <li class="tabitem"><a href="#box2">motor<span></span></a></li> </ul> </div> </div> <div class="content"> <div id="box1" class="box show"> ss </div> <div id="box2" class="box"> 555 </div> </div> <div class="toolbar"> <div class="tabs"> <ul> <li class="tabitem2 active"><a href="#box3">person<span></span></a></li> <li class="tabitem2"><a href="#box4">company<span></span></a></li> </ul> </div> </div> <div class="content"> <div id="box3" class="box2 show"> ss </div> <div id="box4" class="box2"> 555 </div> </div>
i find 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 = this.getelementsbytagname("a")[0]; var span = this.getelementsbytagname("span")[0]; var href = a.getattribute("href").replace("#", ""); (var = 0; < boxitem.length; i++) { boxitem[i].classname = boxitem[i].classname.replace(/(?:^|\s)show(?!\s)/g, ''); } document.getelementbyid(href).classname += " show"; (var = 0; < 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); }; (var = 0; < 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 = this.getelementsbytagname("a")[0]; var span = this.getelementsbytagname("span")[0]; var href = a.getattribute("href").replace("#", ""); (var = 0; < boxitem.length; i++) { boxitem[i].classname = boxitem[i].classname.replace(/(?:^|\s)show(?!\s)/g, ''); } document.getelementbyid(href).classname += " show"; (var = 0; < 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); }; (var = 0; < 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 { 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 { 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: 1s cubic-bezier(0.4, 0.0, 1, 1); } .tabs span { position: absolute; margin-left: -40px; margin-top: -24px; width: 80%; background: #f57c00; height: 100%; display: block; border-radius: 50%; opacity: 0; } .tabs 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%; } }<div class="toolbar"> <div class="tabs"> <ul> <li class="tabitem active"><a href="#box1">car<span></span></a></li> <li class="tabitem"><a href="#box2">motor<span></span></a></li> </ul> </div> </div> <div class="content"> <div id="box1" class="box show"> ss </div> <div id="box2" class="box"> 555 </div> </div> <div class="toolbar"> <div class="tabs"> <ul> <li class="tabitem2 active"><a href="#box3">person<span></span></a></li> <li class="tabitem2"><a href="#box4">company<span></span></a></li> </ul> </div> </div> <div class="content"> <div id="box3" class="box2 show"> ss </div> <div id="box4" class="box2"> 555 </div> </div>
Comments
Post a Comment