纯CSS选项卡-第一个选项卡面板应在加载时打开
我使用下面的创建纯CSS标签纯CSS选项卡-第一个选项卡面板应在加载时打开,css,tabs,Css,Tabs,我使用下面的创建纯CSS标签 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <style type="text/css"> *::-moz-selection { background: none repeat scroll 0 0 #F26D5E; color:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
*::-moz-selection {
background: none repeat scroll 0 0 #F26D5E;
color: white;
}
#bar {
position: fixed;
width: 100%;
top: 0;
}
#content > p {
font-size: 12px;
line-height: 24px;
text-align: left;
color: #416C80;
font-family:Arial, "Trebuchet MS", Calibri;
}
li div p {
font-size: 14px;
line-height: 24px;
text-align: left;
color: #888888;
font-family:Arial, "Trebuchet MS", Calibri;
}
a {
color: #888888;
text-decoration: none;
outline: none;
}
#tabs-content {
position: relative;
clear: both;
}
li div {
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
border: 1px solid #888888;
float: left;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 0 15px;
position: absolute;
visibility: hidden;
width: 473px;
left: 0;
margin-top:0px;
}
#tabs {
}
ul {
float: left;
margin: 0;
padding: 0;
position: relative;
}
#tabs li {
float:left;
list-style-type: none;
}
#tabs li a {
border: 1px solid #662381;
margin: 0 0 0 0;
padding: 6px 25px;
position: relative;
z-index: 1;
font-size: 10px;
background-color:#662381;
color: #FFFFFF;
font-family:Arial, "Trebuchet MS", Calibri;
display: block;
top: 1px;
}
#tabs li a:hover {
background-color:#red;
}
#tabs-content div p {
position: relative;
text-align: justify;
}
#One:target a,#Two:target a,#Three:target a, #Four:target a {
color: #FFFFFF;
border-bottom: none;
padding-top: 7px;
background-color:#0186e1;
}
#One:target div,#Two:target div,#Three:target div, #Four:target div {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
visibility: visible;
}
#prel:target div
{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
visibility: visible;
}
i {
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
i:hover {
background: none repeat scroll 0 0 #F26D5E;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li id="One"><a href="#One" id="first"> DESCRIPTION </a>
<div>
<p>Some stuff</p>
</div>
</li>
<li id="Two"><a href="#Two" id="sec"> CREDITS </a>
<div>
<p>More stuff</p>
</div>
</li>
<li id="Three"><a href="#Three" id="third"> FEATURES </a>
<div>
<p>You guessed it: more stuff again.</p>
</div>
</li>
<li id="Four"><a href="#Four" id="four"> ITEM SPECIFICS </a>
<div>
<p>ITEMS</p>
</div>
</li>
</ul>
</div>
</body>
</html>
无标题文件
*：-moz选择{
背景：无重复滚动0 0#F26D5E；
颜色：白色；
}
#酒吧{
位置：固定；
宽度：100%；
排名：0；
}
#内容>p{
字体大小：12px；
线高：24px；
文本对齐：左对齐；
颜色：#416C80；
字体系列：Arial，“投石机MS”，Calibri；
}
李迪普{
字体大小：14px；
线高：24px；
文本对齐：左对齐；
颜色：#888888；
字体系列：Arial，“投石机MS”，Calibri；
}
a{
颜色：#888888；
文字装饰：无；
大纲：无；
}
#选项卡内容{
位置：相对位置；
明确：两者皆有；
}
李迪夫{
-webkit转换：所有0.5秒轻松0秒；
-moz转换：所有0.5秒到0秒；
-o型过渡：所有0.5秒到0秒；
-ms转换：所有0.5秒到0秒；
过渡：所有0.5秒到0秒；
边框：1px实心#8888888；
浮动：左；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
过滤器：alpha（不透明度=0）；
不透明度：0；
填充：0 15px；
位置：绝对位置；
可见性：隐藏；
宽度：473px；
左：0；
边际上限：0px；
}
#标签{
}
保险商实验室{
浮动：左；
保证金：0；
填充：0；
位置：相对位置；
}
#tabs li{
浮动：左；
列表样式类型：无；
}
#李娜{
边框：1px实心#662381；
保证金：0；
填充：6px 25px；
位置：相对位置；
z指数：1；
字体大小：10px；
背景色：#662381；
颜色：#FFFFFF；
字体系列：Arial，“投石机MS”，Calibri；
显示：块；
顶部：1px；
}
#李娜：悬停{
背景色：#红色；
}
#选项卡内容分区p{
位置：相对位置；
文本对齐：对齐；
}
#一：目标a，#二：目标a，#三：目标a，#四：目标a{
颜色：#FFFFFF；
边框底部：无；
填充顶部：7px；
背景色：#0186e1；
}
#一：目标区，二：目标区，三：目标区，四：目标区{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=100）”；
过滤器：α（不透明度=100）；
不透明度：1；
能见度：可见；
}
#预备课：目标课
{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=100）”；
过滤器：α（不透明度=100）；
不透明度：1；
能见度：可见；
}
我{
-webkit转换：所有0.5秒轻松0秒；
-moz转换：所有0.5秒到0秒；
-o型过渡：所有0.5秒到0秒；
-ms转换：所有0.5秒到0秒；
过渡：所有0.5秒到0秒；
}
i:悬停{
背景：无重复滚动0 0#F26D5E；
颜色：#FFFFFF；
}
-
一些东西
-
更多的东西
-
你猜对了：又是更多的东西
-
项目
有没有一种方法可以通过使用CSS（没有任何javascript或其他事件）显示加载/可见的第一个选项卡面板？哇，我甚至不知道这是可能的，纯CSS选项卡 当您单击锚定时，会触发
：targethttp://yoursite.com/purecsstabs.html#One
这对于您当前的HTML结构来说非常棘手。我甚至不确定这种布局是否可行。我认为最理想的方法是在document ready事件上执行以下代码行：
$(function() {
if (!location.hash) {
location.hash = 'One';
}
});
一般来说，您会/应该使用javascript来实现这一点，但是实际上有一个纯css解决方案来实现这一点 在第一个无线电输入已选中属性
的情况下使用无线电输入li div p{
字体大小：14px；
线高：24px；
文本对齐：左对齐；
颜色：#888888；
字体系列：Arial，“投石机MS”，Calibri；
}
保险商实验室{
浮动：左；
保证金：0；
填充：0；
位置：相对位置；
}
#tabs li{
浮动：左；
列表样式类型：无；
}
输入[type=“radio”]{
显示：无；
}
.标签{
显示：无；
位置：绝对位置；
顶部：27px；
-webkit转换：所有0.5秒轻松0秒；
-moz转换：所有0.5秒到0秒；
-o型过渡：所有0.5秒到0秒；
-ms转换：所有0.5秒到0秒；
过渡：所有0.5秒到0秒；
边框：1px实心#8888888；
浮动：左；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
过滤器：alpha（不透明度=0）；
填充：0 15px；
位置：绝对位置；
宽度：456px；
左：0；
框大小：边框框；
}
输入[type=“radio”]：选中。选项卡{
显示：块；
}
输入[type=“radio”]：选中~标签{
背景色：番茄；
}
标签{
光标：指针；
边框：1px实心#662381；
保证金：0；
填充：6px 25px；
位置：相对位置；
z指数：1；
字体大小：10px；
背景色：#662381；
颜色：#FFFFFF；
字体系列：Arial，“投石机MS”，Calibri；
显示：内联块；
顶部：1px；
}
标签：悬停{
背景色：番茄；
}
#选项卡内容分区p{
位置：相对位置；
文本对齐：对齐；
}
我{
-webkit转换：所有0.5秒轻松0秒；
-moz转换：所有0.5秒到0秒；
-o型过渡：所有0.5秒到0秒；
-ms转换：所有0.5秒到0秒；
过渡：所有0.5秒到0秒；
}
i:悬停{
背景：无重复滚动0 0#F26D5E；
颜色：#FFFFFF；
}
-
描述
一些东西
-
信用
你猜对了：又是更多的东西
-
特征
一些东西
$(function() {
if (!location.hash) {
location.hash = 'One';
}
});
<input type="radio" id="rad1" name="radioTabs" checked />
input[type="radio"]:checked ~ .tab {
display: block;
}