简单的HTML/CSS选项卡导航在Safari 9中不起作用.为什么
Simple HTML/CSS tabs navigation does not work in Safari 9. Why?
我不明白。这里的双选项卡导航适用于Safari 7、Firefox 41和Chrome 46。但在Safari 9 (Mac)上就不是这样了。没有错误信息,不知道它是什么。看起来第二个标签被选中了;但是没有显示DIV。(更糟糕的是,同样的代码似乎在这里工作。)
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: <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>
谢谢你的提示
似乎Safari 9不支持用于更改选项卡的css选择器。请注意,即使是codeconvey的演示也不能工作。
有一些或多或少常见的和完善的选项卡库,你可以使用。我个人更喜欢Twitter Bootstrap,它有更多的功能,包括标签。有很好的样本,一切都有很好的记录:Bootstrap 3 tab
相关文章:
- 为什么我的JavaScript在Safari上的严格模式下不能正常工作
- 为什么这个排序功能在 Safari 中不起作用
- 为什么find('input:focus')在safari中不起作用
- 为什么这个html5音频不能在chrome上工作,但在safari上工作得很好
- 为什么 Safari 放弃了对 SharedWorker 的支持
- 为什么插件被 Safari 阻止
- 为什么从位置哈希中选择下拉列表在 Chrome 上有效,但不适用于 Firefox、IE 或 Safari
- Javascript 在加载 200mb 的新 Images() 后在 Safari / iPad2 中运行缓慢.为什么
- 为什么 Chrome、Safari 和 Firefox 中的 getTimezoneOffset() 和 toLocal
- 为什么 Chrome 和 Safari 看不到某些子域的 Cookie
- 为什么 $(document).blur() 和 $(document).focus() 不能与 Safari 或 Ch
- 为什么控制台.log在JSC环境中不起作用,但它可以在Safari的调试控制台中工作
- 为什么这适用于Safari和Firefox,而不是Chrome
- 为什么在用户滚动后,设置超时不会在触摸端处理程序中触发(iOS Safari)
- 为什么Safari中相同宽度的“选择和输入”标签在渲染时差异巨大
- 为什么不't此页面的javascript可在Mobile Safari上使用
- 为什么safari桌面中的地理定位失败
- 为什么我可以'不要在Safari中从底部和左侧使用鼠标悬停
- 为什么onclick事件在Firefox和Safari中不触发
- 移动Safari:为什么是window ?scrollTo(0,0)不滚动到(0,0)