如何在不使用 JS 代码的情况下单击通过 Thunderbird 作为附件发送的 html-css 文件中的选项卡？

Question

我正在尝试使用 Mozilla Thunderbird 电子邮件客户端发送 html-css 报告（作为附件）。选项 'Display Attachements Inline' 被选中，因此我们可以在不下载文件的情况下看到 .html 报告的渲染内容。

我正在尝试在此报告文件中使用标签，我在这里找到了这个漂亮的标签：https://codepen.io/iprodev/full/yygvPx/

我遇到的问题是，当我用 Thunderbird 发送 html-css 文件时，当 .html 文件的内容在电子邮件中呈现时，我可以看到与它们完全一样的选项卡，但我无法单击它们/无法从一个选项卡切换到另一个选项卡。

我查看了代码，发现有一些 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>

我希望能够单击电子邮件本身中的选项卡，但我不知道如何将代码从使用 JS 来承担此责任更改为仅使用 html/css 以便能够单击选项卡。

Answer 1

我基本上应用了您评论中指定的相同更改。它利用 :checked 获得选择效果，并使用 form 使选择生效。

我修改了代码。它不再使用 JavaScript。它看起来像是在 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>

如何在不使用 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?

html

css

email

tabs

thunderbird