javascript - 简单的 HTML/CSS 标签导航在 Safari 9 中不起作用。为什么？

Question

我不明白。 two-tabs-navigation here适用于 Safari 7、Firefox 41、Chrome 46。但不适用于 Safari 9 (Mac)。没有错误消息，不知道它是什么。似乎正在选择第二个选项卡；但未显示 DIV。 (更糟糕的是，相同的代码似乎可以工作 here 。)

CSS 是这样的: tab { 左填充:2em；

        /* navigation bar for maps/definition */
        .cctabs {
            width: 100%;
            margin: 100px auto;
            font-family: Arial, sans-serif;
        }
        .cctabs input[type="radio"] {
            opacity: 0;
        }
        .cctabs label {
            color: #000;
            cursor: pointer;
            float: left;
            margin-right: 2px;
            padding: 0 7%;
            font-size:13px;
            font-weight:bold;
            border: 1px solid #fff;
            height: 15px;
            background-color: #eee;
        }
        .cctabs label:hover {
            background: -webkit-linear-gradient(#8a6a6a 0%, rgba(102,102,102,0.17) 100%);
        }
        .cctabs input:checked + label {
            background: #fff;
            color: #ebb704;
            border-top:solid 2px #ebb704;
            background-color: rgba(245, 245, 245, 0.7);
        }
        .cctabs input:nth-of-type(1):checked ~ .panels .panel:first-child, .cctabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2), .cctabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3), .cctabs input:nth-of-type(4):checked ~ .panels .panel:last-child {
            opacity: 1;
            -webkit-transition: .3s;
            /*position:relative;*/
            z-index:999;
        }
        .cctabs .panels {
            float: left;
            clear: both;
            position: relative;
            width: 100%;
            background: #fff;
        }
        .cctabs .panel {
            width: 100%;
            opacity: 0;
            position: absolute;
            background: #fff;
            padding: 4%;
            box-sizing: border-box;
        }               
    </style>        

HTML 这个:

    <div class="cctabs" style="height: 780px; width: 1135px;">
        <input checked id="one" name="tabs" type="radio">
        <label for="one" style="margin-left: 300px"><i class="fa fa-pencil-square-o"></i> Annual Display</label>
        <input id="two" name="tabs" type="radio" value="Two">
        <label for="two"><i class="fa fa-magic"></i> Long-Term Display</label>
        <div class="panels" style="padding-top: 10px;">
            <div class="panel" style="height: 730px; padding: 0; margin: 0;">
                <div style="width: 100%; height: 725px;">
                    <div id="div_graph" style="width: 1115px; height: 650px;"></div>
                    <button id="updateLegend" style="margin-left: 1000px;">Show Legend</button>
                    <br clear="all" />
                    <button id="showAll" style="margin-left: 1000px">Show All</button>
                    <button id="hideAll" >Hide All</button>
                </div>
            </div>
            <div class="panel" style="height: 725px; padding: 0; margin: 0;">
                <div style="width: 100%; height: 725px;">
                    <div id="div_graph2" style="width: 1115px; height: 650px;"></div>
                    <button id="updateLegend2" style="margin-left: 1000px">Show Legend</button>
                    <br clear="all" />
                    <button id="showAll2" style="margin-left: 1000px">Show All</button>
                    <button id="hideAll2" >Hide All</button>
                </div>
            </div>
        </div>


        <script>

            $(function () {

                <?php include("graph_sea_level_1.js"); ?>

                <?php include("graph_sea_level_2.js"); ?>
            });

        </script>

    </div>

感谢任何提示。

Answer 1

似乎 Safari 9 不支持用于更改选项卡的 css-selector。请注意，即使是来自 codeconvey 的演示也是如此。不工作。

您可以使用一些或多或少常见且完善的选项卡库。 我个人更喜欢 Twitter Bootstrap，它具有更多功能，包括选项卡。有很好的样本，一切都有据可查: Bootstrap 3 Tabs