我想从头开始创建 Javascript 选项卡
Here is 4 Steps to create Javascript Tabs from scratch
Copy following Css, Javascript , HTML and Finally Initialize Tabs in Script
**Step 1: Copy the following Css For Tabs**
:root {
/*Color Used*/
--CrTe: rgb(70 164 199/ 0.91); /*ColorTheme */
--CrTeRGB: 70 164 199; /*ColorThemeRGB*/
--CrTeTtLt: white; /*ColorThemeLight*/
--CrTeHrTt: white; /*ColorThemeHoverText*/
--CrTeBr: rgb(var(--CrTeRGB)/.95); /*ColorThemeBorder*/
/*Red Green Yellow Black Brown Grey Orange Blue Pink Voilet White*/
--CrRd: 255 0 0;
--CrGn: 21 173 145;
--CrYw: 238 225 26;
--CrBk: 23 22 22;
--CrBn: 98 53 3;
--CrGy: 108 103 103;
--CrOe: 236 134 9;
--CrBe: 70 164 199;
--CrPk: 222 203 223;
--CrVt: 151 9 248;
--CrWe: 239 239 239;
--CrTeBdBody: rgb(245 246 246 / 0.95); /*ColorThemeBackground */
}
/*Pixel Equivalent rem*/
--Pl0: 0rem;
--Pl1: 0.0625rem;
--Pl2: 0.125rem;
--Pl3: 0.1875rem;
--Pl4: 0.25rem;
--Pl5: 0.3125rem;
--Pl6: 0.375rem;
--Pl7: 0.4375rem;
--Pl8: 0.5rem;
--Pl9: 0.5625rem;
--Pl10: 0.625rem;
--Pl30: 1.875rem;
/*Rem Ends*/
.CrBdWe85{background-color:rgb(var(--CrWe)/.85) !important;}
/*Padding*/
.Pg7{padding:var(--Pl7) !important;}
.Pg3{padding:var(--Pl3) !important;}
.Pg10{padding:var(--Pl10) !important;}
.PgLtRt10{padding-left: var(--Pl10) !important;padding-right: var(--Pl10) !important;}
.BrRs15{border-radius:var(--Pl15) !important;}
/*Tabs Css*/
.UTabLink {
padding: var(--Pl8) var(--Pl5);
cursor: pointer;
min-height: var(--Pl30);
display: flex;
align-items:center;
justify-content:center;
font-weight: 500;
border-right: var(--Pl1) solid rgb(236 236 236 / 0.95);
box-shadow: inset 0px 0px var(--Pl6) rgb(236 236 236 / 0.95);
margin: var(--Pl0) var(--Pl3) var(--Pl0) var(--Pl0);
background-color: rgb( var(--CrTeRGB) /.15);
transition: all ease-in-out .5s;
transition-property: background-color,box-shadow;
border-top-left-radius: var(--Pl3);
border-top-right-radius: var(--Pl3);
font-weight: 600;
}
.UTabActive, .UTabLink:hover {
background-color: rgb( var(--CrTeRGB) /.8) !important;
border-top: var(--Pl2) solid var(--CrTeBr) !important;
color: var(--CrTeHrTt);
}
.UTabDeactive {
background-color: rgb( var(--CrGy) / .4) !important;
color: rgb(var(--CrWe)) !important;
border-top: rgb(var(--CrGy)) !important;
cursor: no-drop !important;
}
.UTabs {
box-shadow: inset var(--Pl0) var(--Pl0) var(--Pl6) rgb(236 236 236 / 0.95);
border-left: var(--Pl1) solid rgb(199 193 193 / 0.80);
border-right: var(--Pl1) solid rgb(199 193 193 / 0.80);
border-top: var(--Pl1) solid rgb(199 193 193 / 0.80);
border-radius: var(--Pl2) var(--Pl2) var(--Pl0) var(--Pl0);
box-shadow: var(--Pl0) var(--Pl2) var(--Pl2) rgb(199 193 193 / 0.80);
padding: var(--Pl3) var(--Pl3) var(--Pl0) var(--Pl3);
display: flex;
flex-direction: row;
background-color: var(--CrTeBdBody);
}
.UTabsCont {
width: 100%;
min-height: 100px;
padding: var(--Pl5);
display: block;
border-radius: var(--Pl0) var(--Pl0) var(--Pl2) var(--Pl2);
border-left: var(--Pl1) solid rgb(199 193 193 / 0.80);
border-right: var(--Pl1) solid rgb(199 193 193 / 0.80);
border-bottom: var(--Pl1) solid rgb(199 193 193 / 0.80);
}
.UTabsContent > div:not(:first-child) {
display: none;
}
/*Tabs Css Ends*/
/*ShadowBoxInset1Div-Version1*/
.SwBxIt1Dv-Vn1 {
box-shadow: inset 0 0 var(--Pl6) var(--CrSwIr)
}
.SwBx1Dv-Vn1 {
box-shadow: var(--Pl2) var(--Pl2) var(--Pl6) var(--Pl2) var(--CrSwOt);
}
.FxRw {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
flex-wrap:wrap;
width:100%;
}
.FxAnImSh {align-items: stretch;}
.Fx5, .Fx10, .Fx15, .Fx20, .Fx25, .Fx30, .Fx33, .Fx35, .Fx40, .Fx45, .Fx50,
.Fx55, .Fx60, .Fx65, .Fx70, .Fx75, .Fx80, .Fx85, .Fx90, .Fx95, .Fx100 {
flex: 0 0 100%;
max-width: 100%;
}
@@media (min-width: 768px) {
.Fx5{ flex: 0 0 5% ; max-width:5% ;}
.Fx10{ flex: 0 0 10% ; max-width:10% ;}
.Fx15{ flex: 0 0 15% ; max-width:15% ;}
.Fx20{ flex: 0 0 20% ; max-width:20% ;}
.Fx25{ flex: 0 0 25% ; max-width:25% ;}
.Fx30{ flex: 0 0 30% ; max-width:30% ;}
.Fx33{ flex: 0 0 33.333% ; max-width:33.333% ;}
.Fx35{ flex: 0 0 35% ; max-width:35% ;}
.Fx40{ flex: 0 0 40% ; max-width:40% ;}
.Fx45{ flex: 0 0 45% ; max-width:45% ;}
.Fx50{ flex: 0 0 50% ; max-width:50% ;}
.Fx55{ flex: 0 0 55% ; max-width:55% ;}
.Fx60{ flex: 0 0 60% ; max-width:60% ;}
.Fx65{ flex: 0 0 65% ; max-width:65% ;}
.Fx70{ flex: 0 0 70% ; max-width:70% ;}
.Fx75{ flex: 0 0 75% ; max-width:75% ;}
.Fx80{ flex: 0 0 80% ; max-width:80% ;}
.Fx85{ flex: 0 0 85% ; max-width:85% ;}
.Fx90{ flex: 0 0 90% ; max-width:90% ;}
.Fx95{ flex: 0 0 95% ; max-width:95% ;}
.Fx100{ flex: 0 0 100% ; max-width:100% ;}
}
/*Border-- -Cr implies to add class cr to show border*/
.Br1_Cr {
border: var(--Pl1) solid !important;
}
.BrTp3_Cr{border-top:var(--Pl3) solid !important;}
/*Border Color*/
.CrBrTe{border-color:var(--CrTeBr) !important;}
.BrRs5{border-radius:var(--Pl5) !important;}
/*Margin*/
.MnTp7{margin-top:var(--Pl7) !important;}
.MnBm7{margin-bottom:var(--Pl7) !important;}
.FxGw1 {flex-grow: 1;}
/*Btn Design*/
.BnRd15 {
padding: var(--Pl5) var(--Pl7);
font-size: var(--Pl15);
font-weight: 400;
border-radius: var(--Pl22);
padding: var(--Pl4) var(--Pl9);
border-color: transparent;
border-width: var(--Pl2);
display: inline-flex;
justify-content: center;
align-items: center;
outline: none;
transform: scale(.94);
}
/*ColorBackground*/
.CrBdTeBnNt {background-color:var(--CrTeBnNt ) !important;}
/*HoverTransformScale*/
.HrTmSeo94:hover {transform: scale(.94);transition: transform ease-in-out .4s;}
/*Tabs Css Ends*/
**// Step2 Now Copy Add Following Script**
//Tabs Script
function TabsUT(TabLinkIdStg, TabActiveInt, TabDisableAryInt, TabHideAryInt) {
var TablinkId = document.getElementById(TabLinkIdStg);
TablinkId.classList.add("UTabs");
var tablink = TablinkId.children;
var tabcontent = [];
for (var i = 0; i < tablink.length; i++) {
//Adds TabContent
var getContentTab = document.getElementById(TabLinkIdStg + "Cont" + i);
tabcontent.push(getContentTab);
//
//Adds Id To Link
tablink[i].setAttribute("id", TabLinkIdStg + [i]);
tablink[i].setAttribute("Num", [i]);
tablink[i].setAttribute('onclick', "ClickTabUT('" + TabLinkIdStg + "','" + TabLinkIdStg + [i] + "')");
//Ends
//Check Which Tab To be Activate At Start
tablink[i].classList.add('UTabLink');
tabcontent[i].classList.add('UTabCont');
//Hide All TabContent First
tabcontent[i].style.display = 'none'
if (i === 0) {
tablink[i].classList.add('UTabActive');
tabcontent[i].style.display = 'block'
}
if (TabActiveInt === i) {
tablink[0].classList.remove('UTabActive');
tablink[i].classList.add('UTabActive');
tabcontent[0].style.display = 'none';
tabcontent[i].style.display = 'block';
}
//Ends
}
try {
DisableTabUt(TabLinkIdStg, TabDisableAryInt);
} catch { }
try {
HideTabUt(TabLinkIdStg, TabHideAryInt)
} catch { }
}
function ClickTabUT(TabLinkIdStg, ClickedTabIdStg)
{
var tablink = document.getElementById(TabLinkIdStg).children;
var tabcontent = [];
for (var i = 0; i < tablink.length; i++)
{
//Adds TabContent
var getContentTab = document.getElementById(TabLinkIdStg + "Cont" + i);
tabcontent.push(getContentTab);
}
for (var i = 0; i < tablink.length; i++) {
try { tabcontent[i].style.display = 'none'; }
catch { }
try {
tablink[i].classList.remove("UTabActive");
}
catch { }
}
var clickedtab = document.getElementById(ClickedTabIdStg);
clickedtab.classList.add("UTabActive");
tabcontent[clickedtab.getAttribute("Num")].style.display = "block";
}
function DisableTabUt(TabLinkIdStg, TabDisableInt)
{
for (var i = 0; i < TabDisableInt.length; i++)
{
var tabId = TabLinkIdStg + TabDisableInt[i];
var tab = document.getElementById(tabId) ;
tab.removeAttribute("onclick");
document.getElementById(TabLinkIdStg + "Cont" + TabDisableInt[i]).style.display = "none";
if (tab.classList.contains("UTabActive"))
{
tab.classList.remove('UTabActive');
}
tab.classList.add('UTabDeactive');
}
}
function HideTabUt(TabLinkIdStg, TabHideAryInt)
{
for (var i = 0; i < TabHideAryInt.length; i++)
{
var tabId = TabLinkIdStg + TabHideAryInt[i];
var tab = document.getElementById(tabId);
document.getElementById(TabLinkIdStg + "Cont" + TabHideAryInt[i]).style.display = "none";
tab.style.display = "none";
if (tab.classList.contains("UTabActive")) {
tab.classList.remove('UTabActive');
}
}
}
function ActiveTabUt(TabLinkIdStg, TabActiveInt) {
var TablinkId = document.getElementById(TabLinkIdStg);
TablinkId.classList.add("UTabs");
var tablink = TablinkId.children;
tablink[TabActiveInt].setAttribute('onclick', "ClickTabUT('" + TabLinkIdStg + "','" + TabLinkIdStg + [TabActiveInt] + "')");
var tabcontent = [];
for (var i = 0; i < tablink.length; i++) {
//Adds TabContent
var getContentTab = document.getElementById(TabLinkIdStg + "Cont" + i);
tabcontent.push(getContentTab);
//Hide All TabContent First
tabcontent[i].style.display = 'none'
if (tablink[i].classList.contains('UTabActive')) {
tablink[i].classList.remove('UTabActive');
}
if (TabActiveInt === i) {
if (tablink[i].classList.contains('UTabDeactive'))
{
tablink[i].classList.remove('UTabDeactive');
}
tablink[i].classList.add('UTabActive');
tablink[i].style.display = 'flex';
tabcontent[i].style.display = 'block';
}
}
}
//Ends
**//Step3 Finally Here the Html Part.**
注意：选项卡内容 ID 应该具有 TabLink Div Id 的后缀，例如。 id="UTabs9" 是 TablinkId，选项卡内容 id 是 id="UTabs9Cont0" 、 id="UTabs9Cont1" 与选项卡链接一样多。
<div class="SwBx1Dv-Vn1 CrBdWe85 Pg7 BrRs15">
<div class="FxRw FxAnImSh">
<div class="Fx100 Pg3">
<div id="UTabs9">
<div>Detail</div>
<div>Other Detail</div>
<div><i class="UT-ImageLine"></i></div>
</div>
<div class="BrTp3_Cr Br1_Cr CrBrTe BrRs5 ">
<div id="UTabs9Cont0">
<div class="Pg10">
Tab1
</div>
</div>
<div id="UTabs9Cont1">
<div class="Pg10">
Tab2
</div>
</div>
<div id="UTabs9Cont2">
<div class="Pg12">
Demo of the Tab Tab 3
</div>
</div>
</div>
</div>
</div>
</div>
**//Step4 Finally Intialize Tabs on page load.**
TabsUT('UTabs9', 0, [], []);
app.Use(async (context, next) =>{
var request = context.Request;
if (!request.Host.Value.StartsWith("www.", StringComparison.OrdinalIgnoreCase)) {
var wwwUrl = $"{request.Scheme}://www.{request.Host.Value}{request.PathBase}{request.Path}{request.QueryString}";
context.Response.Redirect(wwwUrl, true);
return;
}
await next();});