Question

我不明白。 two-tabs-navigation here适用于Safari 7，适用于Firefox 41，适用于Chrome 46.但不适用于Safari 9（Mac）。没有错误信息，也不知道它是什么。似乎第二个标签正在被选中;但DIV没有显示。（更糟糕的是，相同的代码似乎有用here。）

CSS是这样的： tab {padding-left：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 this：

    <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选择器。请注意，即使codeconvey的演示也不起作用。

您可以使用一些或多或少常见且完善的选项卡库。我个人更喜欢Twitter Bootstrap，它有很多功能，包括标签。有很好的样本，所有内容都有详细记录： Bootstrap 3 Tabs

简单的HTML / CSS选项卡导航在Safari 9中不起作用。为什么？

1 个答案: