svg+css+js实现带主题样式切换的tab选项卡代码-html代码-BFW代码库

代码语言：html
所属分类：选项卡
代码描述：svg+css+js实现带主题样式切换的tab选项卡代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  



  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&display=swap");
:root {
  --ink-color-0: white;
  --ink-color-5: #f6f6f7;
  --ink-color-10: #e9e9ee;
  --ink-color-15: #d8d8e0;
  --ink-color-20: #ccccd7;
  --ink-color-35: #a8a8b9;
  --ink-color-50: #81819a;
  --ink-color-60: #6e6e8a;
  --ink-color-80: #484859;
  --ink-color-100: #1d1d2d;
  --ink-color-80-alpha: #1d1d2dcc;
  --ink-lighter-color: white;
  --ink-lighter-inactive-color: white;
  --ink-darker-color: #a8a8b9;
  --ink-darker-inactive-color: #d8d8e0;
}

[data-theme=dark] {
  --ink-color-0: #1d1d2d;
  --ink-color-5: #262635;
  --ink-color-10: #313140;
  --ink-color-15: #404050;
  --ink-color-20: #49495c;
  --ink-color-35: #676780;
  --ink-color-50: #8b8Ba2;
  --ink-color-60: #9e9eb2;
  --ink-color-80: #cfcfd8;
  --ink-color-100: white;
  --ink-color-80-alpha: #ffffffcc;
  --ink-lighter-color: #676780;
  --ink-lighter-inactive-color: #404050;
  --ink-darker-color: #1d1d2d;
  --ink-darker-inactive-color: #1d1d2d;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: barlow;
  background: var(--ink-color-5);
  color: var(--ink-color-100);
}

svg {
  fill: currentcolor;
  stroke: currentcolor;
  overflow: visible;
  display: block;
}
svg.defs, svg[data-prep=true] {
  position: absolute;
  height: 0;
  width: 0;
}

symbol {
  overflow: visible;
}

.action-set {
  stroke-width: 5px;
}
.action-set.segmented {
  display: flex;
  position: relative;
  border: 2px solid transparent;
  border-radius: 5px;
  transition: all 0.1s ease-in-out;
}
.action-set.segmented::before {
  content: "";
  position: absolute;
  left: 0;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--ink-color-5);
  opacity: 0;
  transition: all 0.25s ease-in-out, opacity 0.1s ease-in-out;
}
.action-set.segmented:hover {
  background: var(--ink-color-0);
}
.action-set.segmented:hover::before {
  opacity: 1;
}
.action-set.segmented input {
  position: absolute;
  transform: scale(0);
}
.action-set.segmented input:checked + label {
  color: var(--ink-color-100);
}
.action-set.segmented input:checked + label svg {
  fill: var(--ink-color-0);
}
.action-set.segmented input:not(:checked):hover + label {
  color: var(--ink-color-80);
}
.action-set.segmented input:not(:checked) + label {
  cursor: pointer;
}
.action-set.segmented input:not(:checked) + label:active svg {
  stroke-width: 7px;
}
.action-set.segmented label {
  display: grid;
  justify-items: center;
  padding: 5px;
  border-radius: 3px;
  color: var(--ink-color-35);
  transition: all 0.1s ease-in-out;
}
.action-set.segmented label svg {
  height: 18px;
  aspect-ratio: 1;
  fill: transparent;
}
.action-set.segmented:has(input:nth-of-type(2):checked)::before {
  transform: translatex(100%);
}

[data-tooltip]:not([data-tooltip=""]) {
  position: relative;
}
[data-tooltip]:not([data-tooltip=""])::after {
  content: attr(data-tooltip);
  position: absolute;
  margin-block: 6px;
  border-radius: 3px;
  margin-inline: -8px;
  height: 24px;
  padding: 4px 7px;
  z-index: 1;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 14.5px;
  white-space: nowrap;
  opacity: 0;
  background-color: var(--ink-color-80-alpha);
  color: var(--ink-color-0);
  -webkit-text-fill-color: currentcolor;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  pointer-events: none;
  transition: all 0.1s ease-in-out;
  transform: scale(0);
}
[data-tooltip]:not([data-tooltip=""])::after {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  top: 100%;
  justify-self: center;
  align-self: start;
  transform-origin: top center;
}
[data-tooltip]:not([data-tooltip=""]):hover::after {
  opacity: 1;
  transition-delay: 0.25s;
  transform: scale(1);
}

body {
  font-family: barlow;
  background: var(--ink-color-5);
  color: var(--ink-color-100);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 18px;
}

main {
  position: relative;
  flex: 1 0 339px;
  max-width: 732px;
  display: grid;
  grid-template-rows: minmax(auto, 1fr) auto 5vh minmax(auto, 1fr);
  grid-template-columns: auto;
  grid-template-areas: "header" "content" "." "footer";
  transition: all 0.25s ease-in-out;
}
main[data-width=fixed] {
  max-width: 375px;
}

nav.tabs#demo {
  grid-area: content;
}

nav.tabs {
  position: relative;
  display: flex;
  justify-content: center;
  margin: -6px -11px 0;
  height: 41px;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 22px;
}
nav.tabs::before {
  content: "";
  position: absolute;
  height: 1px;
  left: 11px;
  right: 11px;
  bottom: 0px;
  border-radius: 0.5px;
  color: var(--ink-color-20);
  background: currentcolor;
  box-shadow: 0 0 0 0.25px currentcolor;
  transform: translatey(-0.5px);
}
nav.tabs a {
  --item-fg-color: var(--ink-color-35);
  --item-bg-lighter-color: var(--ink-lighter-inactive-color);
  --item-bg-darker-color: var(--ink-darker-inactive-color);
  position: relative;
  box-sizing: content-box;
  display: grid;
  height: 24px;
  margin: 0 0 -6px;
  border-block: 6px transparent solid;
  border-inline: 11px transparent solid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  color: var(--item-fg-color);
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  transition: max-width 0.25s ease-in-out, color 0.1s ease-in-out;
}
nav.tabs a::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: 0.5px;
  color: transparent;
  background: currentcolor;
  box-shadow: 0 0 0 0.25px currentcolor;
  transform: scalex(0) translatey(-0.5px);
  transition: all 0.1s ease-in-out;
  pointer-events: none;
}
nav.tabs a::after {
  display: none;
}
nav.tabs a:last-child::after {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  top: 100%;
  justify-self: end;
  align-self: start;
  transform-origin: top right;
}
nav.tabs a:first-child::after {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  top: 100%;
  justify-self: start;
  align-self: start;
  transform-origin: top left;
}
nav.tabs a.transition {
  pointer-events: none;
  overflow-x: hidden;
  height: 36px;
}
nav.tabs a.transition:not(.active) {
  -webkit-text-fill-color: currentcolor;
}
nav.tabs a.transition::after {
  display: none;
}
nav.tabs a.active {
  --item-fg-color: var(--ink-color-100);
  --item-bg-lighter-color: var(--ink-lighter-color);
  --item-bg-darker-color: var(--ink-darker-color);
  pointer-events: none;
}
nav.tabs a.active::before {
  color: var(--item-fg-color);
  transform: scalex(1) translatey(-0.5px);
}
nav.tabs a.active::after {
  display: none;
}
nav.tabs a:hover {
  --item-fg-color: var(--ink-color-100);
  --item-bg-lighter-color: var(--ink-lighter-color);
  --item-bg-darker-color: var(--ink-darker-color);
}
nav.tabs a:active svg {
  stroke-width: 4px;
}
nav.tabs a svg {
  pointer-events: none;
  height: 24px;
  aspect-ratio: 1;
  stroke: var(--item-fg-color);
  color: var(--item-bg-lighter-color);
  fill: var(--item-bg-darker-color);
  transition: all 0.1s ease-in-out;
}
nav.tabs.compact a:not(.active):not(.transition) {
  -webkit-text-fill-color: transparent;
  grid-template-columns: 24px;
  justify-items: center;
  font-size: 1px;
  line-height: 1em;
}
nav.tabs.compact a:not(.active):not(.transition)::after {
  display: block;
}
nav.tabs:not(.compact) a:active {
  -webkit-text-stroke: 0.035em currentcolor;
}

.action-set.segmented#theme {
  justify-self: center;
  align-self: start;
  grid-area: header;
}

.action-set.segmented#width {
  justify-self: center;
  align-self: end;
  grid-area: footer;
}
.action-set.segmented#width label::after {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  bottom: 100%;
  justify-self: center;
  align-self: end;
  transform-origin: bottom center;
}
</style>

  
</head>

  <body data-theme="light">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72" data-prep="true"><defs><symbol id="expedition" viewBox="0 0 72 72"><g data-layer="silhouette outline" style="fill: none; stroke-linejoin: round; stroke-linecap: round"><path d="m62.25,12.5c5.62,0,9.25,4.51,9.25,11.49,0,10.86-7.81,26.42-11.17,32.61-.07.13-.08.29-.02.44.06.14.18.25.33.29,1.17.32,2.24.75,3.18,1.29,2.34,1.35,3.68,3.31,3.68,5.38s-1.34,4.03-3.68,5.38c-2.11,1.22-4.89,1.89-7.82,1.89s-5.71-.67-7.82-1.89c-2.34-1.35-3.68-3.31-3.68-5.38s1.34-4.03,3.68-5.38c.08-.04.16-.09.23-.13.14-.08.24-.22.26-.37.02-.16-.04-.32-.15-.43-3.66-3.45-8.02-9.29-8.02-17.52,0-9.55,6.48-20.77,14.75-25.55,2.43-1.4,4.78-2.11,7-2.11m0-.5c-2.31,0-4.75.73-7.25,2.18-8.41,4.86-15,16.27-15,25.98,0,8.35,4.36,14.29,8.18,17.89-.08.04-.17.09-.25.14-2.5,1.44-3.93,3.56-3.93,5.82s1.43,4.37,3.93,5.81c2.19,1.26,5.05,1.96,8.07,1.96s5.88-.7,8.07-1.96c2.5-1.44,3.93-3.56,3.93-5.81s-1.43-4.37-3.93-5.81c-.98-.56-2.09-1.01-3.3-1.34,3.53-6.51,11.23-21.95,11.23-32.85,0-7.29-3.83-11.99-9.75-11.99h0Z"/><path d="m22.25.5c5.62,0,9.25,4.51,9.25,11.49,0,10.86-7.81,26.42-11.17,32.61-.07.13-.08.29-.02.44.06.14.18.25.33.29,1.18.32,2.25.75,3.18,1.29,2.34,1.35,3.68,3.31,3.68,5.38s-1.34,4.03-3.68,5.38c-2.11,1.22-4.89,1.89-7.82,1.89s-5.71-.67-7.82-1.89c-2.34-1.35-3.68-3.31-3.68-5.38s1.34-4.03,3.68-5.38c.08-.05.16-.09.24-.13.14-.08.23-.22.26-.38.02-.16-.04-.32-.15-.43C4.86,42.24.5,36.4.5,28.16.5,18.61,6.98,7.39,15.25,2.61c2.43-1.4,4.78-2.11,7-2.11m0-.5c-2.31,0-4.75.73-7.25,2.18C6.59,7.04,0,18.45,0,28.16c0,8.35,4.36,14.29,8.18,17.89-.08.05-.17.09-.25.14-2.5,1.44-3.93,3.56-3.93,5.82s1.43,4.37,3.93,5.81c2.19,1.26,5.05,1.96,8.07,1.96s5.88-.7,8.07-1.96c2.5-1.44,3.93-3.56,3.93-5.81s-1.43-4.37-3.93-5.81c-.97-.56-2.09-1.01-3.3-1.34,3.53-6.51,11.23-21.95,11.23-32.85,0-7.29-3.83-11.99-9.75-11.99h0Z"/></g><g data-layer="dark fill" style="stroke: none"><ellipse cx="16" cy="52" rx="10" ry="5.77"/><ellipse cx="56" cy="64" rx="10" ry="5.77"/><path d="m16,3.91C8.27,8.38,2,19.23,2,28.16c0,11.58,9.39,18.48,12.79,20.34.34.18.78.12,1.21-.13.44-.25.87-.69,1.21-1.27,3.4-5.78,12.79-23.52,12.79-35.1,0-8.93-6.27-12.55-14-8.08Z"/><path d="m56,15.91c-7.73,4.46-14,15.32-14,24.25,0,11.58,9.39,18.48,12.79,20.34.34.18.78.12,1.21-.13.44-.25.87-.69,1.21-1.27,3.4-5.78,12.79-23.52,12.79-35.1,0-8.93-6.27-12.55-14-8.08Z"/></g><g data-layer="light overlay fill" style="stroke: none; opacity: .4; fill: currentcolor"><ellipse cx="16" cy="52" rx="10" ry="5.77"/><ellipse cx="56" cy="64" rx="10" ry="5.77"/></g><g data-layer="light fill" style="stroke: none; fill: currentcolor"><ellipse cx="16" cy="20.08" rx="7.42" ry="4.29" transform="translate(-9.39 23.89) rotate(-60)"/><ellipse cx="56" cy="32.08" rx="7.42" ry="4.29" transform="translate(.22 64.53) rotate(-60)"/></g><g data-layer="thin linework" style="fill: none; stroke-width: 3px; stroke-linejoin: round; stroke-linecap: round"><path d="m28,70.5c-.66,0-1.28-.14-1.7-.38-.07-.04-.13-.08-.17-.12.04-.03.1-.07.17-.12.42-.24,1.04-.38,1.7-.38s1.28.14,1.7.38c.07.04.13.08.17.12-.04.03-.1.07-.17.12-.42.24-1.04.38-1.7.38Z"/><path d="m24,64.5c-.66,0-1.28-.14-1.7-.38-.07-.04-.13-.08-.17-.12.04-.03.1-.07.17-.12.42-.24,1.04-.38,1.7-.38s1.28.14,1.7.38c.07.04.13.08.17.12-.04.03-.1.07-.17.12-.42.24-1.04.38-1.7.38Z"/><path d="m38,68.5c-.66,0-1.28-.14-1.7-.38-.07-.04-.13-.08-.17-.12.04-.03.1-.07.17-.12.42-.24,1.04-.38,1.7-.38s1.28.14,1.7.38c.07.04.13.08.17.12-.04.03-.1.07-.17.12-.42.24-1.04.38-1.7.38Z"/></g><g data-layer="thick linework" style="fill: none; stroke-width: 4px; stroke-linejoin: round; stroke-linecap: round"><ellipse cx="16" cy="52" rx="10" ry="5.77"/><ellipse cx="56" cy="64" rx="10" ry="5.77"/><path d="m16,3.91C8.27,8.38,2,19.23,2,28.16c0,11.58,9.39,18.48,12.79,20.34.34.18.78.12,1.21-.13.44-.25.87-.69,1.21-1.27,3.4-5.78,12.79-23.52,12.79-35.1,0-8.93-6.27-12.55-14-8.08Z"/><path d="m56,15.91c-7.73,4.46-14,15.32-14,24.25,0,11.58,9.39,18.48,12.79,20.34.34.18.78.12,1.21-.13.44-.25.87-.69,1.21-1.27,3.4-5.78,12.79-23.52,12.79-35.1,0-8.93-6.27-12.55-14-8.08Z"/></g></symbol><symbol id="location" viewBox="0 0 72 72"><g data-layer="silhouette outline" style="fill: none; stroke-linejoin: round; stroke-linecap: round"><path d="m42.25.5c5.62,0,9.25,4.51,9.25,11.49,0,7.48-3.75,17.22-6.89,24.07l-.15.34.28.25,2.49,2.21.09.08.11.03,10.13,2.71c.22.06.43.17.61.33l7.98,7.08c.96.85,1.46,2.12,1.33,3.4-.13,1.28-.87,2.42-1.98,3.07l-26.4,15.24c-.8.46-1.71.7-2.63.7-1.29,0-2.53-.47-3.49-1.33l-8.2-7.28-.09-.08-.11-.03-10.13-2.71c-.22-.06-.43-.17-.61-.33l-7.98-7.08c-.96-.85-1.46-2.12-1.33-3.4.13-1.28.87-2.43,1.98-3.07l15.46-8.93.38-.22-.17-.4c-1.11-2.71-1.68-5.57-1.68-8.49,0-9.55,6.48-20.77,14.75-25.55,2.43-1.4,4.78-2.11,7-2.11m0-.5c-2.31,0-4.75.73-7.25,2.18-8.41,4.86-15,16.27-15,25.98,0,3,.58,5.91,1.72,8.68l-15.46,8.93c-1.25.72-2.09,2.01-2.23,3.45-.15,1.44.41,2.87,1.49,3.83l7.98,7.08c.23.21.51.36.81.44l10.13,2.71,8.2,7.28c1.06.94,2.41,1.45,3.82,1.45,1.01,0,2.01-.27,2.88-.77l26.4-15.24c1.25-.72,2.08-2.01,2.23-3.45.15-1.44-.41-2.87-1.49-3.83l-7.98-7.08c-.23-.21-.51-.36-.81-.44l-10.13-2.71-2.49-2.21c3.3-7.2,6.93-16.81,6.93-24.27S48.17,0,42.25,0h0Z"/></g><g data-layer="dark fill" style="stroke: none"><path d="m65.15,50.21c1.28,1.14,1.08,3.19-.41,4.05l-26.4,15.24c-1.4.81-3.17.63-4.38-.44l-8.56-7.59,31.76-18.34,7.98,7.09Z"/><path d="m42.62,36.77c3.62-7.67,7.38-17.45,7.38-24.78,0-8.93-6.27-12.55-14-8.08s-14,15.32-14,24.25c0,3.63.92,6.8,2.3,9.5l-17.04,9.84c-1.48.86-1.69,2.91-.41,4.05l7.98,7.08,18.78-10.84c.44.28.85.53,1.18.71.34.18.78.12,1.21-.13.44-.25.87-.69,1.21-1.27.34-.58.74-1.28,1.19-2.08l8.19-4.73-3.96-3.52Z"/></g><g data-layer="light overlay fill" style="stroke: none; opacity: .4; fill: currentcolor"><path d="m65.15,50.21c1.28,1.14,1.08,3.19-.41,4.05l-26.4,15.24c-1.4.81-3.17.63-4.38-.44l-8.56-7.59,31.76-18.34,7.98,7.09Z"/><path d="m38.4,45.02l8.19-4.73-3.96-3.52c-1.53,3.24-3.04,6.11-4.23,8.24Z"/><path d="m24.3,37.66l-17.04,9.84c-1.48.86-1.69,2.91-.41,4.05l7.98,7.08,18.78-10.84c-2.61-1.67-6.74-5.06-9.31-10.12Z"/></g><g data-layer="light fill" style="stroke: none; fill: currentcolor"><polygon points="57.18 43.12 25.41 61.47 14.82 58.63 46.59 40.29 57.18 43.12"/><ellipse cx="36" cy="20.08" rx="7.42" ry="4.29" transform="translate(.61 41.21) rotate(-60)"/></g><g data-layer="thin linework" style="fill: none; stroke-width: 3px; stroke-linejoin: round; stroke-linecap: round"></g><g data-layer="thick linework" style="fill: none; stroke-width: 4px; stroke-linejoin: round; stroke-linecap: round"><path d="m17.47,31.82"/><path d="m42.62,36.78l3.96,3.51,10.59,2.84,7.98,7.08c1.28,1.14,1.07,3.19-.41,4.05l-26.4,15.24c-1.4.81-3.16.63-4.38-.44l-8.56-7.59-10.59-2.84-7.98-7.08c-1.28-1.14-1.07-3.19.41-4.05l17.04-9.84"/><path d="m36,3.91c-7.73,4.46-14,15.32-14,24.25,0,11.58,9.39,18.48,12.79,20.34.34.18.78.12,1.21-.13.44-.25.87-.69,1.21-1.27,3.4-5.78,12.79-23.52,12.79-35.1,0-8.93-6.27-12.55-14-8.08Z"/></g></symbol><symbol id="object" viewBox="0 0 72 72"><g data-layer="silhouette outline" style="fill: none; stroke-linejoin: round; stroke-linecap: round"><path d="m36,.55c1.05,0,2.08.28,2.99.8l25.5,14.72c1.86,1.07,3.01,3.06,3.01,5.21v29.44c0,2.15-1.15,4.14-3.01,5.21l-25.5,14.72c-.91.53-1.94.8-2.99.8s-2.08-.28-2.99-.8l-25.5-14.72c-1.86-1.07-3.01-3.06-3.01-5.21v-29.44c0-2.15,1.15-4.14,3.01-5.21L33.01,1.35c.91-.53,1.94-.8,2.99-.8m0-.5c-1.12,0-2.24.29-3.24.87L7.26,15.64c-2.02,1.16-3.26,3.32-3.26,5.64v29.44c0,2.32,1.24,4.48,3.26,5.64l25.5,14.72c1,.58,2.12.87,3.24.87s2.24-.29,3.24-.87l25.5-14.72c2.02-1.16,3.26-3.32,3.26-5.64v-29.44c0-2.32-1.24-4.48-3.26-5.64L39.24.92c-1-.58-2.12-.87-3.24-.87h0Z"/></g><g data-layer="dark fill" style="stroke: none"><path d="m65.4,19.03l-29.4,16.97L6.6,19.03c-.38.68-.6,1.45-.6,2.25v29.44c0,1.61.86,3.11,2.26,3.91l25.5,14.72c.68.39,1.45.6,2.24.6s1.56-.21,2.24-.6l25.5-14.72c1.4-.8,2.26-2.3,2.26-3.91v-29.44c0-.8-.22-1.57-.6-2.25Z"/></g><g data-layer="light overlay fill" style="stroke: none; opacity: .4; fill: currentcolor"><path d="m36,36v33.95c-.79,0-1.56-.21-2.24-.6l-25.5-14.72c-1.4-.8-2.26-2.3-2.26-3.91v-29.44c0-.8.22-1.57.6-2.25l29.4,16.97Z"/></g><g data-layer="light fill" style="stroke: none; fill: currentcolor"><path d="m63.74,17.37c.7.4,1.27.98,1.66,1.66l-29.4,16.97L6.6,19.03c.39-.68.96-1.26,1.66-1.66L33.76,2.65c.68-.39,1.45-.6,2.24-.6s1.56.21,2.24.6c0,0,25.5,14.72,25.5,14.72Z"/></g><g data-layer="thin linework" style="fill: none; stroke-width: 3px; stroke-linejoin.........完整代码请登录后点击上方下载按钮下载查看