纯CSS选项卡 - 第一个选项卡面板应在加载时打开

时间：2014-12-08 09:28:58

标签： css tabs

我使用以下内容创建Pure 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: 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">&nbsp;&nbsp;DESCRIPTION&nbsp;&nbsp;</a>
                    <div>
                        <p>Some stuff</p>
                    </div>
                </li>
                <li id="Two"><a href="#Two" id="sec">&nbsp;&nbsp;&nbsp;&nbsp;CREDITS&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <div>
                        <p>More stuff</p>
                    </div>
                </li>
                <li id="Three"><a href="#Three" id="third">&nbsp;&nbsp;FEATURES&nbsp;&nbsp;</a>
                    <div>
                        <p>You guessed it: more stuff again.</p>
                    </div>
                </li>
                <li id="Four"><a href="#Four" id="four">&nbsp;&nbsp;ITEM SPECIFICS&nbsp;</a>
                    <div>
                        <p>ITEMS</p>
                    </div>
                </li>
            </ul>
        </div>



</body>
</html>

一切正常但第一个Tab面板无法加载/可见，除非我点击第一个标签，即说明。

有没有办法只使用CSS（没有任何javascript或其他事件）显示加载/可见的第一个选项卡面板？

3 个答案:

答案 0 :(得分：1)

一般来说，您应该/应该使用javascript，但实际上有一个纯粹的CSS解决方案...

使用第一个无线电输入具有属性checked

的无线电输入 
<input type="radio" id="rad1" name="radioTabs" checked />

<强> FIDDLE

1）隐藏输入元素本身，并通过标签（=标签）

触发它们

2）标签内容最初为display:none;

3）然后使用:checked选择器显示必要标签的内容

input[type="radio"]:checked ~ .tab {
    display: block;
}


li div p {
  font-size: 14px;
  line-height: 24px;
  text-align: left;
  color: #888888;
  font-family: Arial, "Trebuchet MS", Calibri;
}
ul {
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
}
#tabs li {
  float: left;
  list-style-type: none;
}
input[type="radio"] {
  display: none;
}
.tab {
  display: none;
  position: absolute;
  top: 27px;
  -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);
  padding: 0 15px;
  position: absolute;
  width: 456px;
  left: 0;
  box-sizing: border-box;
}
input[type="radio"]:checked ~ .tab {
  display: block;
}
input[type="radio"]:checked ~ label {
  background-color: tomato;
}
label {
  cursor: pointer;
  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: inline-block;
  top: 1px;
}
label:hover {
  background-color: tomato;
}
#tabs-content div p {
  position: relative;
  text-align: justify;
}
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;
}
<div id="tabs">
  <ul>
    <li>
      <input type="radio" id="rad1" name="radioTabs" checked />
      <label for="rad1">DESCRIPTION</label>
      <div class="tab">
        <p>Some stuff</p>
      </div>
    </li>
    <li>
      <input type="radio" id="rad2" name="radioTabs" />
      <label for="rad2">CREDITS</label>
      <div class="tab">
        <p>You guessed it: more stuff again.</p>
      </div>
    </li>
    <li>
      <input type="radio" id="rad3" name="radioTabs" />
      <label for="rad3">FEATURES</label>
      <div class="tab">
        <p>Some stuff</p>
      </div>
    </li>
    <li>
      <input type="radio" id="rad4" name="radioTabs" />
      <label for="rad4">ITEM SPECIFICS</label>
      <div class="tab">
        <p>ITEMS</p>
      </div>
    </li>

  </ul>
</div>

答案 1 :(得分：0)

<哇哇我甚至不知道那是可能的，纯粹的css标签。

当您单击锚点时触发:target CSS选择器，为什么不直接在网址中传递锚点？

http://yoursite.com/purecsstabs.html#One

通过这样做，您可以轻松更改默认选项卡而无需更改太多代码（只需更改网址）。

http://yoursite.com/purecsstabs.html#Two
http://yoursite.com/purecsstabs.html#Three

答案 2 :(得分：0)

对于您当前的HTML结构，这非常棘手。我甚至不确定这种布局是否可行。我认为最优的只是在文档就绪事件上执行这些代码行：

$(function() {
    if (!location.hash) {
        location.hash = 'One';
    }
});
相关问题
最新问题