如何在不使用 JS 代码的情况下单击以 Thunderbird 作为附件发送的 html-css 文件中的选项卡？
[英]How can I click tabs in a html-css file that was sent with Thunderbird as an attachment without using JS code?
问题描述
I'm trying to send a html-css report (as an attachement) with Mozilla Thunderbird email client.
我正在尝试使用 Mozilla Thunderbird 电子邮件客户端发送 html-css 报告（作为附件）。 The option 'Display Attachements Inline' is checked so we can see the rendered content of the .html report without downloading the file.选中了“Display Attachments Inline”选项，这样我们就可以在不下载文件的情况下查看 .html 报告的呈现内容。
I'm trying to use tabs in this report file and I found this beautiful tabs here: https://codepen.io/iprodev/full/yygvPx/我试图在这个报告文件中使用标签，我在这里找到了这个漂亮的标签： https : //codepen.io/iprodev/full/yygvPx/
The problem that I have is that when I send the html-css file with Thunderbird, when the content of the .html file is rendered in the email, I can see the tabs exactly like they are but I can't click on them / can't switch from one to another.我遇到的问题是，当我使用 Thunderbird 发送 html-css 文件时，当 .html 文件的内容在电子邮件中呈现时，我可以看到与它们完全一样的选项卡，但我无法点击它们/不能从一个切换到另一个。
I looked at the code and I saw there is some JavaScript code that is responsible for click event and I know Thunderbird dosen't allow JS code to be run (security reasons i guess), so i need a way to click the tabs using only html & css.我查看了代码，发现有一些 JavaScript 代码负责单击事件，我知道 Thunderbird 不允许运行 JS 代码（我猜是出于安全原因），所以我需要一种方法来单击选项卡仅使用html 和 css。
<head>
<title>Modern Tabs Design with pure CSS</title>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400);
html, body {
margin: 0;
padding: 0;
background: #E8ECEF;
height: 100%;
width: 100%;
text-align: center;
}
h1{
font: 400 30px roboto, "Open Sans", Helvetica, sans-serif;
text-transform: uppercase;
}
h2{
font: 300 22px roboto, "Open Sans", Helvetica, sans-serif;
text-transform: uppercase;
}
.switcher-box {
list-style: none;
margin: 0;
padding: 0;
margin: 40px 0;
text-align: center;
}
.switcher-box a {
display: inline-block;
width: 32px;
height: 32px;
margin-right: 10px;
padding: 3px;
cursor: pointer;
background: #FFF;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}
.switcher-box a span {
display: block;
width: 100%;
height: 100%;
-webkit-box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15) inset, 0 5px 20px rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15) inset, 0 5px 20px rgba(255, 255, 255, 0.4) inset;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.switcher-box a.active {
background: #000;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) inset;
}
.switcher-box a.active span {
border-color: #BBB;
}
.switcher-box a.skin-turquoise span {
background: #1ABC9C;
}
.switcher-box a.skin-emerald span {
background: #2ECC71;
}
.switcher-box a.skin-peter-river span {
background: #3498DB;
}
.switcher-box a.skin-amethyst span {
background: #9B59B6;
}
.switcher-box a.skin-wet-asphalt span {
background: #34495E;
}
.switcher-box a.skin-sun-flower span {
background: #F1C40F;
}
.switcher-box a.skin-carrot span {
background: #E67E22;
}
.switcher-box a.skin-alizarin span {
background: #E74C3C;
}
.switcher-box a.skin-graphite span {
background: #454545;
}
.switcher-box a.skin-concrete span {
background: #95A5A6;
}
.switcher-box a.skin-green-sea span {
background: #16A085;
}
.switcher-box a.skin-nephritis span {
background: #27AE60;
}
.switcher-box a.skin-belize-hole span {
background: #2980B9;
}
.switcher-box a.skin-wisteria span {
background: #8E44AD;
}
.switcher-box a.skin-midnight-blue span {
background: #2C3E50;
}
.switcher-box a.skin-orange span {
background: #F39C12;
}
.switcher-box a.skin-pumpkin span {
background: #D35400;
}
.switcher-box a.skin-pomegranate span {
background: #C0392B;
}
.switcher-box a.skin-silver span {
background: #BDC3C7;
}
.switcher-box a.skin-asbestos span {
background: #7F8C8D;
}
.switcher-box a.skin-dodgerblue span {
background: dodgerblue;
}
.switcher-box a.skin-gray-black span {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I1YmRjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyODM0M2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
.switcher-box a.skin-black-glass span {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FlYmNiZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzZlNzc3NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzBhMGUwYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwYTA4MDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
/* Tabbed Styles */
.tabbed {
width: 80%;
min-width: 400px;
margin: 0 auto;
margin-bottom: 68px;
border-bottom: 4px solid #000;
overflow: hidden;
transition: border 250ms ease;
}
.tabbed ul {
margin: 0px;
padding: 0px;
overflow: hidden;
float: left;
padding-left: 48px;
list-style-type: none;
}
.tabbed ul * {
margin: 0px;
padding: 0px;
}
.tabbed ul li {
display: block;
float: right;
padding: 10px 24px 8px;
background-color: #FFF;
margin-right: 46px;
z-index: 2;
position: relative;
cursor: pointer;
color: #777;
text-transform: uppercase;
font: 600 13px/20px roboto, "Open Sans", Helvetica, sans-serif;
transition: all 250ms ease;
}
.tabbed ul li:before,
.tabbed ul li:after {
display: block;
content: " ";
position: absolute;
top: 0;
height: 100%;
width: 44px;
background-color: #FFF;
transition: all 250ms ease;
}
.tabbed ul li:before {
right: -24px;
transform: skew(30deg, 0deg);
box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0;
}
.tabbed ul li:after {
left: -24px;
transform: skew(-30deg, 0deg);
box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0;
}
.tabbed ul li:hover,
.tabbed ul li:hover:before,
.tabbed ul li:hover:after {
background-color: #F4F7F9;
color: #444;
}
.tabbed ul li.active {
z-index: 3;
}
.tabbed ul li.active,
.tabbed ul li.active:before,
.tabbed ul li.active:after {
background-color: #000;
color: #fff;
}
/* Round Tabs */
.tabbed.round ul li {
border-radius: 8px 8px 0 0;
}
.tabbed.round ul li:before {
border-radius: 0 8px 0 0;
}
.tabbed.round ul li:after {
border-radius: 8px 0 0 0;
}
/* Skins */
.tabbed[class*="skin-"] ul li {
color: #FFF;
text-shadow: rgba(0,0,0,.1) 0 1px;
}
.tabbed.skin-turquoise {
border-bottom-color: #1ABC9C;
}
.tabbed.skin-turquoise ul li,
.tabbed.skin-turquoise ul li:before,
.tabbed.skin-turquoise ul li:after {
background-color: #34D6B6;
}
.tabbed.skin-turquoise ul li:hover,
.tabbed.skin-turquoise ul li:hover:before,
.tabbed.skin-turquoise ul li:hover:after {
background-color: #40E2C2;
}
.tabbed.skin-turquoise ul li.active,
.tabbed.skin-turquoise ul li.active:before,
.tabbed.skin-turquoise ul li.active:after {
background-color: #1ABC9C;
}
.tabbed.skin-emerald {
border-bottom-color: #2ECC71;
}
.tabbed.skin-emerald ul li,
.tabbed.skin-emerald ul li:before,
.tabbed.skin-emerald ul li:after {
background-color: #48E68B;
}
.tabbed.skin-emerald ul li:hover,
.tabbed.skin-emerald ul li:hover:before,
.tabbed.skin-emerald ul li:hover:after {
background-color: #54F297;
}
.tabbed.skin-emerald ul li.active,
.tabbed.skin-emerald ul li.active:before,
.tabbed.skin-emerald ul li.active:after {
background-color: #2ECC71;
}
.tabbed.skin-peter-river {
border-bottom-color: #3498DB;
}
.tabbed.skin-peter-river ul li,
.tabbed.skin-peter-river ul li:before,
.tabbed.skin-peter-river ul li:after {
background-color: #4EB2F5;
}
.tabbed.skin-peter-river ul li:hover,
.tabbed.skin-peter-river ul li:hover:before,
.tabbed.skin-peter-river ul li:hover:after {
background-color: #5ABEFF;
}
.tabbed.skin-peter-river ul li.active,
.tabbed.skin-peter-river ul li.active:before,
.tabbed.skin-peter-river ul li.active:after {
background-color: #3498DB;
}
.tabbed.skin-amethyst {
border-bottom-color: #9B59B6;
}
.tabbed.skin-amethyst ul li,
.tabbed.skin-amethyst ul li:before,
.tabbed.skin-amethyst ul li:after {
background-color: #B573D0;
}
.tabbed.skin-amethyst ul li:hover,
.tabbed.skin-amethyst ul li:hover:before,
.tabbed.skin-amethyst ul li:hover:after {
background-color: #C17FDC;
}
.tabbed.skin-amethyst ul li.active,
.tabbed.skin-amethyst ul li.active:before,
.tabbed.skin-amethyst ul li.active:after {
background-color: #9B59B6;
}
.tabbed.skin-wet-asphalt {
border-bottom-color: #34495E;
}
.tabbed.skin-wet-asphalt ul li,
.tabbed.skin-wet-asphalt ul li:before,
.tabbed.skin-wet-asphalt ul li:after {
background-color: #4E6378;
}
.tabbed.skin-wet-asphalt ul li:hover,
.tabbed.skin-wet-asphalt ul li:hover:before,
.tabbed.skin-wet-asphalt ul li:hover:after {
background-color: #5A6F84;
}
.tabbed.skin-wet-asphalt ul li.active,
.tabbed.skin-wet-asphalt ul li.active:before,
.tabbed.skin-wet-asphalt ul li.active:after {
background-color: #34495E;
}
.tabbed.skin-sun-flower {
border-bottom-color: #F1C40F;
}
.tabbed.skin-sun-flower ul li,
.tabbed.skin-sun-flower ul li:before,
.tabbed.skin-sun-flower ul li:after {
background-color: #FFDE29;
color: #0A0;
}
.tabbed.skin-sun-flower ul li:hover,
.tabbed.skin-sun-flower ul li:hover:before,
.tabbed.skin-sun-flower ul li:hover:after {
background-color: #FFEA35;
}
.tabbed.skin-sun-flower ul li.active,
.tabbed.skin-sun-flower ul li.active:before,
.tabbed.skin-sun-flower ul li.active:after {
background-color: #F1C40F;
color: #FFF;
}
.tabbed.skin-carrot {
border-bottom-color: #E67E22;
}
.tabbed.skin-carrot ul li,
.tabbed.skin-carrot ul li:before,
.tabbed.skin-carrot ul li:after {
background-color: #FF983C;
}
.tabbed.skin-carrot ul li:hover,
.tabbed.skin-carrot ul li:hover:before,
.tabbed.skin-carrot ul li:hover:after {
background-color: #FFA448;
}
.tabbed.skin-carrot ul li.active,
.tabbed.skin-carrot ul li.active:before,
.tabbed.skin-carrot ul li.active:after {
background-color: #E67E22;
}
.tabbed.skin-alizarin {
border-bottom-color: #E74C3C;
}
.tabbed.skin-alizarin ul li,
.tabbed.skin-alizarin ul li:before,
.tabbed.skin-alizarin ul li:after {
background-color: #FF6656;
}
.tabbed.skin-alizarin ul li:hover,
.tabbed.skin-alizarin ul li:hover:before,
.tabbed.skin-alizarin ul li:hover:after {
background-color: #FF7262;
}
.tabbed.skin-alizarin ul li.active,
.tabbed.skin-alizarin ul li.active:before,
.tabbed.skin-alizarin ul li.active:after {
background-color: #E74C3C;
}
.tabbed.skin-graphite {
border-bottom-color: #454545;
}
.tabbed.skin-graphite ul li,
.tabbed.skin-graphite ul li:before,
.tabbed.skin-graphite ul li:after {
background-color: #5F5F5F;
}
.tabbed.skin-graphite ul li:hover,
.tabbed.skin-graphite ul li:hover:before,
.tabbed.skin-graphite ul li:hover:after {
background-color: #6B6B6B;
}
.tabbed.skin-graphite ul li.active,
.tabbed.skin-graphite ul li.active:before,
.tabbed.skin-graphite ul li.active:after {
background-color: #454545;
}
.tabbed.skin-concrete {
border-bottom-color: #95A5A6;
}
.tabbed.skin-concrete ul li,
.tabbed.skin-concrete ul li:before,
.tabbed.skin-concrete ul li:after {
background-color: #AFBFC0;
}
.tabbed.skin-concrete ul li:hover,
.tabbed.skin-concrete ul li:hover:before,
.tabbed.skin-concrete ul li:hover:after {
background-color: #BBCBCC;
}
.tabbed.skin-concrete ul li.active,
.tabbed.skin-concrete ul li.active:before,
.tabbed.skin-concrete ul li.active:after {
background-color: #95A5A6;
}
.tabbed.skin-green-sea {
border-bottom-color: #16A085;
}
.tabbed.skin-green-sea ul li,
.tabbed.skin-green-sea ul li:before,
.tabbed.skin-green-sea ul li:after {
background-color: #30BA9F;
}
.tabbed.skin-green-sea ul li:hover,
.tabbed.skin-green-sea ul li:hover:before,
.tabbed.skin-green-sea ul li:hover:after {
background-color: #3CC6AB;
}
.tabbed.skin-green-sea ul li.active,
.tabbed.skin-green-sea ul li.active:before,
.tabbed.skin-green-sea ul li.active:after {
background-color: #16A085;
}
.tabbed.skin-nephritis {
border-bottom-color: #27AE60;
}
.tabbed.skin-nephritis ul li,
.tabbed.skin-nephritis ul li:before,
.tabbed.skin-nephritis ul li:after {
background-color: #41C87A;
}
.tabbed.skin-nephritis ul li:hover,
.tabbed.skin-nephritis ul li:hover:before,
.tabbed.skin-nephritis ul li:hover:after {
background-color: #4DD486;
}
.tabbed.skin-nephritis ul li.active,
.tabbed.skin-nephritis ul li.active:before,
.tabbed.skin-nephritis ul li.active:after {
background-color: #27AE60;
}
.tabbed.skin-belize-hole {
border-bottom-color: #2980B9;
}
.tabbed.skin-belize-hole ul li,
.tabbed.skin-belize-hole ul li:before,
.tabbed.skin-belize-hole ul li:after {
background-color: #439AD3;
}
.tabbed.skin-belize-hole ul li:hover,
.tabbed.skin-belize-hole ul li:hover:before,
.tabbed.skin-belize-hole ul li:hover:after {
background-color: #4FA6DF;
}
.tabbed.skin-belize-hole ul li.active,
.tabbed.skin-belize-hole ul li.active:before,
.tabbed.skin-belize-hole ul li.active:after {
background-color: #2980B9;
}
.tabbed.skin-wisteria {
border-bottom-color: #8E44AD;
}
.tabbed.skin-wisteria ul li,
.tabbed.skin-wisteria ul li:before,
.tabbed.skin-wisteria ul li:after {
background-color: #A85EC7;
}
.tabbed.skin-wisteria ul li:hover,
.tabbed.skin-wisteria ul li:hover:before,
.tabbed.skin-wisteria ul li:hover:after {
background-color: #B46AD3;
}
.tabbed.skin-wisteria ul li.active,
.tabbed.skin-wisteria ul li.active:before,
.tabbed.skin-wisteria ul li.active:after {
background-color: #8E44AD;
}
.tabbed.skin-midnight-blue {
border-bottom-color: #2C3E50;
}
.tabbed.skin-midnight-blue ul li,
.tabbed.skin-midnight-blue ul li:before,
.tabbed.skin-midnight-blue ul li:after {
background-color: #46586A;
}
.tabbed.skin-midnight-blue ul li:hover,
.tabbed.skin-midnight-blue ul li:hover:before,
.tabbed.skin-midnight-blue ul li:hover:after {
background-color: #526476;
}
.tabbed.skin-midnight-blue ul li.active,
.tabbed.skin-midnight-blue ul li.active:before,
.tabbed.skin-midnight-blue ul li.active:after {
background-color: #2C3E50;
}
.tabbed.skin-orange {
border-bottom-color: #F39C12;
}
.tabbed.skin-orange ul li,
.tabbed.skin-orange ul li:before,
.tabbed.skin-orange ul li:after {
background-color: #FFB62C;
}
.tabbed.skin-orange ul li:hover,
.tabbed.skin-orange ul li:hover:before,
.tabbed.skin-orange ul li:hover:after {
background-color: #FFC238;
}
.tabbed.skin-orange ul li.active,
.tabbed.skin-orange ul li.active:before,
.tabbed.skin-orange ul li.active:after {
background-color: #F39C12;
}
.tabbed.skin-pumpkin {
border-bottom-color: #D35400;
}
.tabbed.skin-pumpkin ul li,
.tabbed.skin-pumpkin ul li:before,
.tabbed.skin-pumpkin ul li:after {
background-color: #ED6E1A;
}
.tabbed.skin-pumpkin ul li:hover,
.tabbed.skin-pumpkin ul li:hover:before,
.tabbed.skin-pumpkin ul li:hover:after {
background-color: #F97A26;
}
.tabbed.skin-pumpkin ul li.active,
.tabbed.skin-pumpkin ul li.active:before,
.tabbed.skin-pumpkin ul li.active:after {
background-color: #D35400;
}
.tabbed.skin-pomegranate {
border-bottom-color: #C0392B;
}
.tabbed.skin-pomegranate ul li,
.tabbed.skin-pomegranate ul li:before,
.tabbed.skin-pomegranate ul li:after {
background-color: #DA5345;
}
.tabbed.skin-pomegranate ul li:hover,
.tabbed.skin-pomegranate ul li:hover:before,
.tabbed.skin-pomegranate ul li:hover:after {
background-color: #E65F51;
}
.tabbed.skin-pomegranate ul li.active,
.tabbed.skin-pomegranate ul li.active:before,
.tabbed.skin-pomegranate ul li.active:after {
background-color: #C0392B;
}
.tabbed.skin-silver {
border-bottom-color: #BDC3C7;
}
.tabbed.skin-silver ul li,
.tabbed.skin-silver ul li:before,
.tabbed.skin-silver ul li:after {
background-color: #D7DDE1;
color: #666;
}
.tabbed.skin-silver ul li:hover,
.tabbed.skin-silver ul li:hover:before,
.tabbed.skin-silver ul li:hover:after {
background-color: #E3E9ED;
}
.tabbed.skin-silver ul li.active,
.tabbed.skin-silver ul li.active:before,
.tabbed.skin-silver ul li.active:after {
background-color: #BDC3C7;
color: #FFF;
}
.tabbed.skin-asbestos {
border-bottom-color: #7F8C8D;
}
.tabbed.skin-asbestos ul li,
.tabbed.skin-asbestos ul li:before,
.tabbed.skin-asbestos ul li:after {
background-color: #99A6A7;
}
.tabbed.skin-asbestos ul li:hover,
.tabbed.skin-asbestos ul li:hover:before,
.tabbed.skin-asbestos ul li:hover:after {
background-color: #A5B2B3;
}
.tabbed.skin-asbestos ul li.active,
.tabbed.skin-asbestos ul li.active:before,
.tabbed.skin-asbestos ul li.active:after {
background-color: #7F8C8D;
}
.tabbed.skin-dodgerblue {
border-bottom-color: dodgerblue;
}
.tabbed.skin-dodgerblue ul li,
.tabbed.skin-dodgerblue ul li:before,
.tabbed.skin-dodgerblue ul li:after {
background-color: deepskyblue;
}
.tabbed.skin-dodgerblue ul li:hover,
.tabbed.skin-dodgerblue ul li:hover:before,
.tabbed.skin-dodgerblue ul li:hover:after {
background-color: #33ccff;
}
.tabbed.skin-dodgerblue ul li.active,
.tabbed.skin-dodgerblue ul li.active:before,
.tabbed.skin-dodgerblue ul li.active:after {
background-color: dodgerblue;
}
.tabbed.skin-gray-black {
border-bottom-color: #28343b;
}
.tabbed.skin-gray-black,
.tabbed.skin-gray-black ul li,
.tabbed.skin-gray-black ul li:before,
.tabbed.skin-gray-black ul li:after {
transition: none;
}
.tabbed.skin-gray-black ul li,
.tabbed.skin-gray-black ul li:before,
.tabbed.skin-gray-black ul li:after {
background-color: #68737B;
}
.tabbed.skin-gray-black ul li:hover,
.tabbed.skin-gray-black ul li:hover:before,
.tabbed.skin-gray-black ul li:hover:after {
background-color: #707A83;
}
.tabbed.skin-gray-black ul li.active,
.tabbed.skin-gray-black ul li.active:before,
.tabbed.skin-gray-black ul li.active:after {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I1YmRjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyODM0M2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
.tabbed.skin-black-glass {
border-bottom-color: #0a0809;
}
.tabbed.skin-black-glass,
.tabbed.skin-black-glass ul li,
.tabbed.skin-black-glass ul li:before,
.tabbed.skin-black-glass ul li:after {
transition: none;
}
.tabbed.skin-black-glass ul li,
.tabbed.skin-black-glass ul li:before,
.tabbed.skin-black-glass ul li:after {
background-color: #333;
}
.tabbed.skin-black-glass ul li:hover,
.tabbed.skin-black-glass ul li:hover:before,
.tabbed.skin-black-glass ul li:hover:after {
background-color: #444;
}
.tabbed.skin-black-glass ul li.active,
.tabbed.skin-black-glass ul li.active:before,
.tabbed.skin-black-glass ul li.active:after {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FlYmNiZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzZlNzc3NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzBhMGUwYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwYTA4MDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
</style>
</head>
<body>
<h2>Amazing Tabs</h2>
<div class="tabbed round">
<ul>
<li>Tab4</li>
<li>Tab3</li>
<li>Tab2</li>
<li class="active">Tab1</li>
</ul>
</div>
<br><br><br>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var tabs = document.querySelectorAll('.tabbed li');
var switchers = document.querySelectorAll('.switcher-box a');
var skinable = document.getElementById('skinable');
for (var i = 0, len = tabs.length; i < len; i++) {
tabs[i].addEventListener("click", function() {
if (this.classList.contains('active'))
return;
var parent = this.parentNode,
innerTabs = parent.querySelectorAll('li');
for (var index = 0, iLen = innerTabs.length; index < iLen; index++) {
innerTabs[index].classList.remove('active');
}
this.classList.add('active');
});
}
for (var i = 0, len = switchers.length; i < len; i++) {
switchers[i].addEventListener("click", function() {
if (this.classList.contains('active'))
return;
var parent = this.parentNode,
innerSwitchers = parent.querySelectorAll('a'),
skinName = this.getAttribute('skin');
for (var index = 0, iLen = innerSwitchers.length; index < iLen; index++) {
innerSwitchers[index].classList.remove('active');
}
this.classList.add('active');
skinable.className = 'tabbed round ' + skinName;
});
}
});
</script>
</body>
I want to be able to click on the tabs in the email itself but i don't know how to change the code from using JS for this responsability to using html/css only in order to be able to click on the tabs.我希望能够单击电子邮件本身中的选项卡，但我不知道如何将代码从使用 JS 更改为仅使用 html/css 以便能够单击选项卡。
1 个解决方案
解决方案1
0 已采纳 2019-08-01 15:35:38
I have basically applied the same changes as specified in your comments.我基本上应用了与您的评论中指定的相同的更改。 It makes use of :checked to get the selection effect and form to make the selections work.它利用:checked获得选择效果和form来使选择工作。
I have modified the code.我已经修改了代码。 It does not make use of JavaScript anymore.它不再使用 JavaScript。 It looks like it is working on ThunderBird.看起来它正在开发 ThunderBird。
<html>
<head>
<title>Modern Tabs Design with pure CSS</title>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Roboto:300, 400);
html,
body {
margin: 0;
padding: 0;
background: #e8ecef;
height: 100%;
width: 100%;
text-align: center;
}
h1 {
font: 400 30px roboto, "Open Sans", Helvetica, sans-serif;
text-transform: uppercase;
}
h2 {
font: 300 22px roboto, "Open Sans", Helvetica, sans-serif;
text-transform: uppercase;
}
.myradio {
display: none;
height: 0px;
visibility: hidden;
}
.switcher-box {
list-style: none;
margin: 0;
padding: 0;
margin: 40px 0;
text-align: center;
}
.switcher-box a {
display: inline-block;
width: 32px;
height: 32px;
margin-right: 10px;
padding: 3px;
cursor: pointer;
background: #fff;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}
.switcher-box a span {
display: block;
width: 100%;
height: 100%;
-webkit-box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15) inset,
0 5px 20px rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15) inset,
0 5px 20px rgba(255, 255, 255, 0.4) inset;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.switcher-box a.active {
background: #000;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) inset;
}
.switcher-box a.active span {
border-color: #bbb;
}
.switcher-box a.skin-turquoise span {
background: #1abc9c;
}
.switcher-box a.skin-emerald span {
background: #2ecc71;
}
.switcher-box a.skin-peter-river span {
background: #3498db;
}
.switcher-box a.skin-amethyst span {
background: #9b59b6;
}
.switcher-box a.skin-wet-asphalt span {
background: #34495e;
}
.switcher-box a.skin-sun-flower span {
background: #f1c40f;
}
.switcher-box a.skin-carrot span {
background: #e67e22;
}
.switcher-box a.skin-alizarin span {
background: #e74c3c;
}
.switcher-box a.skin-graphite span {
background: #454545;
}
.switcher-box a.skin-concrete span {
background: #95a5a6;
}
.switcher-box a.skin-green-sea span {
background: #16a085;
}
.switcher-box a.skin-nephritis span {
background: #27ae60;
}
.switcher-box a.skin-belize-hole span {
background: #2980b9;
}
.switcher-box a.skin-wisteria span {
background: #8e44ad;
}
.switcher-box a.skin-midnight-blue span {
background: #2c3e50;
}
.switcher-box a.skin-orange span {
background: #f39c12;
}
.switcher-box a.skin-pumpkin span {
background: #d35400;
}
.switcher-box a.skin-pomegranate span {
background: #c0392b;
}
.switcher-box a.skin-silver span {
background: #bdc3c7;
}
.switcher-box a.skin-asbestos span {
background: #7f8c8d;
}
.switcher-box a.skin-dodgerblue span {
background: dodgerblue;
}
.switcher-box a.skin-gray-black span {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I1YmRjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyODM0M2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
.switcher-box a.skin-black-glass span {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FlYmNiZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzZlNzc3NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzBhMGUwYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwYTA4MDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
.myradio:checked + label {
font-weight: bold;
}
/* Tabbed Styles */
.tabbed {
width: 80%;
min-width: 400px;
margin: 0 auto;
margin-bottom: 68px;
border-bottom: 4px solid #000;
overflow: hidden;
transition: border 250ms ease;
}
.tabbed ul {
margin: 0px;
padding: 0px;
overflow: hidden;
float: left;
padding-left: 48px;
list-style-type: none;
}
.tabbed ul * {
margin: 0px;
padding: 0px;
}
.tabbed ul .myradio + label {
display: block;
float: right;
padding: 10px 24px 8px;
background-color: #fff;
margin-right: 46px;
z-index: 2;
position: relative;
cursor: pointer;
color: #777;
text-transform: uppercase;
font: 600 13px/20px roboto, "Open Sans", Helvetica, sans-serif;
transition: all 250ms ease;
}
.tabbed ul .myradio + label:before,
.tabbed ul .myradio + label:after {
display: block;
content: " ";
position: absolute;
top: 0;
height: 100%;
width: 44px;
background-color: #fff;
transition: all 250ms ease;
}
.tabbed ul .myradio + label:before {
right: -24px;
transform: skew(30deg, 0deg);
box-shadow: rgba(0, 0, 0, 0.1) 3px 2px 5px,
inset rgba(255, 255, 255, 0.09) -1px 0;
}
.tabbed ul .myradio + label:after {
left: -24px;
transform: skew(-30deg, 0deg);
box-shadow: rgba(0, 0, 0, 0.1) -3px 2px 5px,
inset rgba(255, 255, 255, 0.09) 1px 0;
}
.tabbed ul .myradio + label:hover,
.tabbed ul .myradio + label:hover:before,
.tabbed ul .myradio + label:hover:after {
background-color: #f4f7f9;
color: #444;
}
.tabbed ul .myradio:checked + label {
z-index: 3;
}
.tabbed ul .myradio:checked + label,
.tabbed ul .myradio:checked + label:before,
.tabbed ul .myradio:checked + label:after {
background-color: #000;
color: #fff;
}
/* Round Tabs */
.tabbed.round ul .myradio + label {
border-radius: 8px 8px 0 0;
}
.tabbed.round ul .myradio + label:before {
border-radius: 0 8px 0 0;
}
.tabbed.round ul .myradio + label:after {
border-radius: 8px 0 0 0;
}
/* Skins */
.tabbed[class*="skin-"] ul .myradio + label {
color: #fff;
text-shadow: rgba(0, 0, 0, 0.1) 0 1px;
}
.tabbed.skin-turquoise {
border-bottom-color: #1abc9c;
}
.tabbed.skin-turquoise ul .myradio + label,
.tabbed.skin-turquoise ul .myradio + label:before,
.tabbed.skin-turquoise ul .myradio + label:after {
background-color: #34d6b6;
}
.tabbed.skin-turquoise ul .myradio + label:hover,
.tabbed.skin-turquoise ul .myradio + label:hover:before,
.tabbed.skin-turquoise ul .myradio + label:hover:after {
background-color: #40e2c2;
}
.tabbed.skin-turquoise ul .myradio:checked + label,
.tabbed.skin-turquoise ul .myradio:checked + label:before,
.tabbed.skin-turquoise ul .myradio:checked + label:after {
background-color: #1abc9c;
}
.tabbed.skin-emerald {
border-bottom-color: #2ecc71;
}
.tabbed.skin-emerald ul .myradio + label,
.tabbed.skin-emerald ul .myradio + label:before,
.tabbed.skin-emerald ul .myradio + label:after {
background-color: #48e68b;
}
.tabbed.skin-emerald ul .myradio + label:hover,
.tabbed.skin-emerald ul .myradio + label:hover:before,
.tabbed.skin-emerald ul .myradio + label:hover:after {
background-color: #54f297;
}
.tabbed.skin-emerald ul .myradio:checked + label,
.tabbed.skin-emerald ul .myradio:checked + label:before,
.tabbed.skin-emerald ul .myradio:checked + label:after {
background-color: #2ecc71;
}
.tabbed.skin-peter-river {
border-bottom-color: #3498db;
}
.tabbed.skin-peter-river ul .myradio + label,
.tabbed.skin-peter-river ul .myradio + label:before,
.tabbed.skin-peter-river ul .myradio + label:after {
background-color: #4eb2f5;
}
.tabbed.skin-peter-river ul .myradio + label:hover,
.tabbed.skin-peter-river ul .myradio + label:hover:before,
.tabbed.skin-peter-river ul .myradio + label:hover:after {
background-color: #5abeff;
}
.tabbed.skin-peter-river ul .myradio:checked + label,
.tabbed.skin-peter-river ul .myradio:checked + label:before,
.tabbed.skin-peter-river ul .myradio:checked + label:after {
background-color: #3498db;
}
.tabbed.skin-amethyst {
border-bottom-color: #9b59b6;
}
.tabbed.skin-amethyst ul .myradio + label,
.tabbed.skin-amethyst ul .myradio + label:before,
.tabbed.skin-amethyst ul .myradio + label:after {
background-color: #b573d0;
}
.tabbed.skin-amethyst ul .myradio + label:hover,
.tabbed.skin-amethyst ul .myradio + label:hover:before,
.tabbed.skin-amethyst ul .myradio + label:hover:after {
background-color: #c17fdc;
}
.tabbed.skin-amethyst ul .myradio:checked + label,
.tabbed.skin-amethyst ul .myradio:checked + label:before,
.tabbed.skin-amethyst ul .myradio:checked + label:after {
background-color: #9b59b6;
}
.tabbed.skin-wet-asphalt {
border-bottom-color: #34495e;
}
.tabbed.skin-wet-asphalt ul .myradio + label,
.tabbed.skin-wet-asphalt ul .myradio + label:before,
.tabbed.skin-wet-asphalt ul .myradio + label:after {
background-color: #4e6378;
}
.tabbed.skin-wet-asphalt ul .myradio + label:hover,
.tabbed.skin-wet-asphalt ul .myradio + label:hover:before,
.tabbed.skin-wet-asphalt ul .myradio + label:hover:after {
background-color: #5a6f84;
}
.tabbed.skin-wet-asphalt ul .myradio:checked + label,
.tabbed.skin-wet-asphalt ul .myradio:checked + label:before,
.tabbed.skin-wet-asphalt ul .myradio:checked + label:after {
background-color: #34495e;
}
.tabbed.skin-sun-flower {
border-bottom-color: #f1c40f;
}
.tabbed.skin-sun-flower ul .myradio + label,
.tabbed.skin-sun-flower ul .myradio + label:before,
.tabbed.skin-sun-flower ul .myradio + label:after {
background-color: #ffde29;
color: #0a0;
}
.tabbed.skin-sun-flower ul .myradio + label:hover,
.tabbed.skin-sun-flower ul .myradio + label:hover:before,
.tabbed.skin-sun-flower ul .myradio + label:hover:after {
background-color: #ffea35;
}
.tabbed.skin-sun-flower ul .myradio:checked + label,
.tabbed.skin-sun-flower ul .myradio:checked + label:before,
.tabbed.skin-sun-flower ul .myradio:checked + label:after {
background-color: #f1c40f;
color: #fff;
}
.tabbed.skin-carrot {
border-bottom-color: #e67e22;
}
.tabbed.skin-carrot ul .myradio + label,
.tabbed.skin-carrot ul .myradio + label:before,
.tabbed.skin-carrot ul .myradio + label:after {
background-color: #ff983c;
}
.tabbed.skin-carrot ul .myradio + label:hover,
.tabbed.skin-carrot ul .myradio + label:hover:before,
.tabbed.skin-carrot ul .myradio + label:hover:after {
background-color: #ffa448;
}
.tabbed.skin-carrot ul .myradio:checked + label,
.tabbed.skin-carrot ul .myradio:checked + label:before,
.tabbed.skin-carrot ul .myradio:checked + label:after {
background-color: #e67e22;
}
.tabbed.skin-alizarin {
border-bottom-color: #e74c3c;
}
.tabbed.skin-alizarin ul .myradio + label,
.tabbed.skin-alizarin ul .myradio + label:before,
.tabbed.skin-alizarin ul .myradio + label:after {
background-color: #ff6656;
}
.tabbed.skin-alizarin ul .myradio + label:hover,
.tabbed.skin-alizarin ul .myradio + label:hover:before,
.tabbed.skin-alizarin ul .myradio + label:hover:after {
background-color: #ff7262;
}
.tabbed.skin-alizarin ul .myradio:checked + label,
.tabbed.skin-alizarin ul .myradio:checked + label:before,
.tabbed.skin-alizarin ul .myradio:checked + label:after {
background-color: #e74c3c;
}
.tabbed.skin-graphite {
border-bottom-color: #454545;
}
.tabbed.skin-graphite ul .myradio + label,
.tabbed.skin-graphite ul .myradio + label:before,
.tabbed.skin-graphite ul .myradio + label:after {
background-color: #5f5f5f;
}
.tabbed.skin-graphite ul .myradio + label:hover,
.tabbed.skin-graphite ul .myradio + label:hover:before,
.tabbed.skin-graphite ul .myradio + label:hover:after {
background-color: #6b6b6b;
}
.tabbed.skin-graphite ul .myradio:checked + label,
.tabbed.skin-graphite ul .myradio:checked + label:before,
.tabbed.skin-graphite ul .myradio:checked + label:after {
background-color: #454545;
}
.tabbed.skin-concrete {
border-bottom-color: #95a5a6;
}
.tabbed.skin-concrete ul .myradio + label,
.tabbed.skin-concrete ul .myradio + label:before,
.tabbed.skin-concrete ul .myradio + label:after {
background-color: #afbfc0;
}
.tabbed.skin-concrete ul .myradio + label:hover,
.tabbed.skin-concrete ul .myradio + label:hover:before,
.tabbed.skin-concrete ul .myradio + label:hover:after {
background-color: #bbcbcc;
}
.tabbed.skin-concrete ul .myradio:checked + label,
.tabbed.skin-concrete ul .myradio:checked + label:before,
.tabbed.skin-concrete ul .myradio:checked + label:after {
background-color: #95a5a6;
}
.tabbed.skin-green-sea {
border-bottom-color: #16a085;
}
.tabbed.skin-green-sea ul .myradio + label,
.tabbed.skin-green-sea ul .myradio + label:before,
.tabbed.skin-green-sea ul .myradio + label:after {
background-color: #30ba9f;
}
.tabbed.skin-green-sea ul .myradio + label:hover,
.tabbed.skin-green-sea ul .myradio + label:hover:before,
.tabbed.skin-green-sea ul .myradio + label:hover:after {
background-color: #3cc6ab;
}
.tabbed.skin-green-sea ul .myradio:checked + label,
.tabbed.skin-green-sea ul .myradio:checked + label:before,
.tabbed.skin-green-sea ul .myradio:checked + label:after {
background-color: #16a085;
}
.tabbed.skin-nephritis {
border-bottom-color: #27ae60;
}
.tabbed.skin-nephritis ul .myradio + label,
.tabbed.skin-nephritis ul .myradio + label:before,
.tabbed.skin-nephritis ul .myradio + label:after {
background-color: #41c87a;
}
.tabbed.skin-nephritis ul .myradio + label:hover,
.tabbed.skin-nephritis ul .myradio + label:hover:before,
.tabbed.skin-nephritis ul .myradio + label:hover:after {
background-color: #4dd486;
}
.tabbed.skin-nephritis ul .myradio:checked + label,
.tabbed.skin-nephritis ul .myradio:checked + label:before,
.tabbed.skin-nephritis ul .myradio:checked + label:after {
background-color: #27ae60;
}
.tabbed.skin-belize-hole {
border-bottom-color: #2980b9;
}
.tabbed.skin-belize-hole ul .myradio + label,
.tabbed.skin-belize-hole ul .myradio + label:before,
.tabbed.skin-belize-hole ul .myradio + label:after {
background-color: #439ad3;
}
.tabbed.skin-belize-hole ul .myradio + label:hover,
.tabbed.skin-belize-hole ul .myradio + label:hover:before,
.tabbed.skin-belize-hole ul .myradio + label:hover:after {
background-color: #4fa6df;
}
.tabbed.skin-belize-hole ul .myradio:checked + label,
.tabbed.skin-belize-hole ul .myradio:checked + label:before,
.tabbed.skin-belize-hole ul .myradio:checked + label:after {
background-color: #2980b9;
}
.tabbed.skin-wisteria {
border-bottom-color: #8e44ad;
}
.tabbed.skin-wisteria ul .myradio + label,
.tabbed.skin-wisteria ul .myradio + label:before,
.tabbed.skin-wisteria ul .myradio + label:after {
background-color: #a85ec7;
}
.tabbed.skin-wisteria ul .myradio + label:hover,
.tabbed.skin-wisteria ul .myradio + label:hover:before,
.tabbed.skin-wisteria ul .myradio + label:hover:after {
background-color: #b46ad3;
}
.tabbed.skin-wisteria ul .myradio:checked + label,
.tabbed.skin-wisteria ul .myradio:checked + label:before,
.tabbed.skin-wisteria ul .myradio:checked + label:after {
background-color: #8e44ad;
}
.tabbed.skin-midnight-blue {
border-bottom-color: #2c3e50;
}
.tabbed.skin-midnight-blue ul .myradio + label,
.tabbed.skin-midnight-blue ul .myradio + label:before,
.tabbed.skin-midnight-blue ul .myradio + label:after {
background-color: #46586a;
}
.tabbed.skin-midnight-blue ul .myradio + label:hover,
.tabbed.skin-midnight-blue ul .myradio + label:hover:before,
.tabbed.skin-midnight-blue ul .myradio + label:hover:after {
background-color: #526476;
}
.tabbed.skin-midnight-blue ul .myradio:checked + label,
.tabbed.skin-midnight-blue ul .myradio:checked + label:before,
.tabbed.skin-midnight-blue ul .myradio:checked + label:after {
background-color: #2c3e50;
}
.tabbed.skin-orange {
border-bottom-color: #f39c12;
}
.tabbed.skin-orange ul .myradio + label,
.tabbed.skin-orange ul .myradio + label:before,
.tabbed.skin-orange ul .myradio + label:after {
background-color: #ffb62c;
}
.tabbed.skin-orange ul .myradio + label:hover,
.tabbed.skin-orange ul .myradio + label:hover:before,
.tabbed.skin-orange ul .myradio + label:hover:after {
background-color: #ffc238;
}
.tabbed.skin-orange ul .myradio:checked + label,
.tabbed.skin-orange ul .myradio:checked + label:before,
.tabbed.skin-orange ul .myradio:checked + label:after {
background-color: #f39c12;
}
.tabbed.skin-pumpkin {
border-bottom-color: #d35400;
}
.tabbed.skin-pumpkin ul .myradio + label,
.tabbed.skin-pumpkin ul .myradio + label:before,
.tabbed.skin-pumpkin ul .myradio + label:after {
background-color: #ed6e1a;
}
.tabbed.skin-pumpkin ul .myradio + label:hover,
.tabbed.skin-pumpkin ul .myradio + label:hover:before,
.tabbed.skin-pumpkin ul .myradio + label:hover:after {
background-color: #f97a26;
}
.tabbed.skin-pumpkin ul .myradio:checked + label,
.tabbed.skin-pumpkin ul .myradio:checked + label:before,
.tabbed.skin-pumpkin ul .myradio:checked + label:after {
background-color: #d35400;
}
.tabbed.skin-pomegranate {
border-bottom-color: #c0392b;
}
.tabbed.skin-pomegranate ul .myradio + label,
.tabbed.skin-pomegranate ul .myradio + label:before,
.tabbed.skin-pomegranate ul .myradio + label:after {
background-color: #da5345;
}
.tabbed.skin-pomegranate ul .myradio + label:hover,
.tabbed.skin-pomegranate ul .myradio + label:hover:before,
.tabbed.skin-pomegranate ul .myradio + label:hover:after {
background-color: #e65f51;
}
.tabbed.skin-pomegranate ul .myradio:checked + label,
.tabbed.skin-pomegranate ul .myradio:checked + label:before,
.tabbed.skin-pomegranate ul .myradio:checked + label:after {
background-color: #c0392b;
}
.tabbed.skin-silver {
border-bottom-color: #bdc3c7;
}
.tabbed.skin-silver ul .myradio + label,
.tabbed.skin-silver ul .myradio + label:before,
.tabbed.skin-silver ul .myradio + label:after {
background-color: #d7dde1;
color: #666;
}
.tabbed.skin-silver ul .myradio + label:hover,
.tabbed.skin-silver ul .myradio + label:hover:before,
.tabbed.skin-silver ul .myradio + label:hover:after {
background-color: #e3e9ed;
}
.tabbed.skin-silver ul .myradio:checked + label,
.tabbed.skin-silver ul .myradio:checked + label:before,
.tabbed.skin-silver ul .myradio:checked + label:after {
background-color: #bdc3c7;
color: #fff;
}
.tabbed.skin-asbestos {
border-bottom-color: #7f8c8d;
}
.tabbed.skin-asbestos ul .myradio + label,
.tabbed.skin-asbestos ul .myradio + label:before,
.tabbed.skin-asbestos ul .myradio + label:after {
background-color: #99a6a7;
}
.tabbed.skin-asbestos ul .myradio + label:hover,
.tabbed.skin-asbestos ul .myradio + label:hover:before,
.tabbed.skin-asbestos ul .myradio + label:hover:after {
background-color: #a5b2b3;
}
.tabbed.skin-asbestos ul .myradio:checked + label,
.tabbed.skin-asbestos ul .myradio:checked + label:before,
.tabbed.skin-asbestos ul .myradio:checked + label:after {
background-color: #7f8c8d;
}
.tabbed.skin-dodgerblue {
border-bottom-color: dodgerblue;
}
.tabbed.skin-dodgerblue ul .myradio + label,
.tabbed.skin-dodgerblue ul .myradio + label:before,
.tabbed.skin-dodgerblue ul .myradio + label:after {
background-color: deepskyblue;
}
.tabbed.skin-dodgerblue ul .myradio + label:hover,
.tabbed.skin-dodgerblue ul .myradio + label:hover:before,
.tabbed.skin-dodgerblue ul .myradio + label:hover:after {
background-color: #33ccff;
}
.tabbed.skin-dodgerblue ul .myradio:checked + label,
.tabbed.skin-dodgerblue ul .myradio:checked + label:before,
.tabbed.skin-dodgerblue ul .myradio:checked + label:after {
background-color: dodgerblue;
}
.tabbed.skin-gray-black {
border-bottom-color: #28343b;
}
.tabbed.skin-gray-black,
.tabbed.skin-gray-black ul .myradio + label,
.tabbed.skin-gray-black ul .myradio + label:before,
.tabbed.skin-gray-black ul .myradio + label:after {
transition: none;
}
.tabbed.skin-gray-black ul .myradio + label,
.tabbed.skin-gray-black ul .myradio + label:before,
.tabbed.skin-gray-black ul .myradio + label:after {
background-color: #68737b;
}
.tabbed.skin-gray-black ul .myradio + label:hover,
.tabbed.skin-gray-black ul .myradio + label:hover:before,
.tabbed.skin-gray-black ul .myradio + label:hover:after {
background-color: #707a83;
}
.tabbed.skin-gray-black ul .myradio:checked + label,
.tabbed.skin-gray-black ul .myradio:checked + label:before,
.tabbed.skin-gray-black ul .myradio:checked + label:after {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I1YmRjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyODM0M2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
.tabbed.skin-black-glass {
border-bottom-color: #0a0809;
}
.tabbed.skin-black-glass,
.tabbed.skin-black-glass ul li,
.tabbed.skin-black-glass ul li:before,
.tabbed.skin-black-glass ul li:after {
transition: none;
}
.tabbed.skin-black-glass ul li,
.tabbed.skin-black-glass ul li:before,
.tabbed.skin-black-glass ul li:after {
background-color: #333;
}
.tabbed.skin-black-glass ul .myradio + label:hover,
.tabbed.skin-black-glass ul .myradio + label:hover:before,
.tabbed.skin-black-glass ul .myradio + label:hover:after {
background-color: #444;
}
.tabbed.skin-black-glass ul .myradio:checked + label,
.tabbed.skin-black-glass ul .myradio:checked + label:before,
.tabbed.skin-black-glass ul .myradio:checked + label:after {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FlYmNiZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzZlNzc3NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzBhMGUwYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwYTA4MDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
</style>
</head>
<body>
<h2>Amazing Tabs</h2>
<div class="tabbed round">
<ul>
<form action="#">
<input
name="myradio"
type="radio"
id="radio1"
class="myradio"
checked
/>
<label for="radio1">Tab 1</label>
<input name="myradio" type="radio" id="radio2" class="myradio" />
<label for="radio2">Tab 2</label>
</form>
</ul>
</div>
<br /><br /><br />
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
当我调整窗口大小时，我们如何防止使用HTML-CSS移动图像？ - How can we prevent that when I resize my window, my images move using HTML-CSS?
如何使用HTML-CSS将两张图片叠加到另一张图片上？ - How overlay two pictures to another using HTML-CSS?
我如何对进度条执行此操作？（html-css） - How do I do this to the progress bar?(html-css)
使用html-css将元素居中 - centering an element using html-css
如何在 HTML-CSS 中水平对齐图片 - how to align picture horizontally in HTML-CSS
html css如何缩短标签 - html css how can i shorten tabs
如何使用HTML-CSS将倾斜/倾斜的背景色设置为文本 - How a sloping/leaning background colour can be set to a text with HTML-CSS
如何在带有谷歌字体 api 的 HTML-CSS 上使用 2 个不同的 fonts？ - How do I use 2 different fonts on HTML-CSS with google font apis?
如何使用HTML-CSS在另一幅图像上叠加效果 - How to overlay an image on other one with transperent effect using HTML-CSS
HTML + CSS：如何实现预期的行为（没有JS！） - HTML + CSS: How can I achieve the expected behaviour (without JS!)
相关标签