默认打开垂直css手风琴的第一部分

Question

我在我的页面中使用了css风格的手风琴菜单。我想要的是默认打开的第一个选项卡。 我尝试给部分的第一个孩子固定高度。但它似乎并不奏效。

这里是我的html代码。

<div class="row-fluid"> 
    <div class="accordiong vertical"> 
    <section id="videos1"> 
     <h2><a href="#videos1">Videos1</a></h2> 
      <p><div class="row-fluid"> 
        <div class="span12"> 
        Content1 goes here 
        </div> 
       </div> 
        </p> 
    </section> 
     <section id="videos2"> 
     <h2><a href="#videos2">Videos2</a></h2> 
      <p><div class="row-fluid"> 
        <div class="span12"> 
        Content2 goes here 
        </div> 
       </div> 
        </p> 
    </section> 
</div> 

样式是这样的（发现它在网上的某个地方）。

<style> 
    /** 
    * CSS3 Only Horizontal and Vertical Accordion 
    * Author: Paul Underwood for Hongkiat.com 
    * Website: www.paulund.co.uk 
    * Date: 27/11/11 
    * Version: 1.0 
    */ 

    /*Define Accordion box*/ 
    .accordiong { margin:10px auto; color:#474747; background:#414141;} 

    /*General Accordion*/ 
    /*Set style of open slide*/ 
    .accordiong section:target { background:#FFF; padding:10px;} 
    .accordiong section:target:hover { background:#FFF; } 
    .accordiong section:target h2 {width:100%;} 
    .accordiong section:target h2 a{ color:#333; padding:0;} 
    .accordiong section:target p {display:block;} 
    .accordiong section h2 a{padding:8px 10px;display:block; font-size:16px; font-weight:normal;color:#eee; text-decoration:none; } 

    /*set style of closed slide*/ 
    .accordiong section{ float:left; overflow:hidden; color:#333; cursor:pointer; background: #333; margin:3px; } 
    .accordiong section:hover {background:#444;} 
    .accordiong section p { display:none; } 

    .accordiong section:after{position:relative;font-size:24px;color:#000;font-weight:bold;} 
    .accordiong section:nth-child(1):after{content:'1';} 
    .accordiong section:nth-child(2):after{content:'2';} 
    .accordiong section:nth-child(3):after{content:'3';} 
    .accordiong section:nth-child(4):after{content:'4';} 
    .accordiong section:nth-child(5):after{content:'5';} 
    /*End General Accordion*/ 

    /*Horizontal Accordion */ 
    .horizontal section{ width:5%; height:250px; 
     -moz-transition:width 0.2s ease-out; 
     -webkit-transition:width 0.2s ease-out; 
     -o-transition:width 0.2s ease-out; 
     -ms-transition:width 0.2s ease-out; 
     transition:width 0.2s ease-out; 
    } 

    /*Position the number of the slide*/ 
    .horizontal section:after{top:140px;left:15px;} 

    /*Header of closed slide*/ 
    .horizontal section h2 { 
     -webkit-transform:rotate(90deg); 
     -moz-transform:rotate(90deg); 
     -o-transform: rotate(90deg); 
     -ms-transform: rotate(90deg); 
     transform: rotate(90deg); 
     width:240px; position:relative; left:-100px; top:85px; 
    } 

    /*On mouse over open slide*/ 
    .horizontal :target{ width:73%;height:230px; } 
    .horizontal :target h2{ top:0px;left:0; 
     -webkit-transform:rotate(0deg); 
     -moz-transform:rotate(0deg); 
     -o-transform: rotate(0deg); 
     -ms-transform: rotate(0deg); 
     transform: rotate(0deg); 
    } 
    /*End Horizontal Accordion */ 

    /*Vertical Accordion*/ 
    .vertical section{ width:100%; height:40px; 
     -webkit-transition:height 0.2s ease-out; 
     -moz-transition:height 0.2s ease-out; 
     -o-transition:height 0.2s ease-out; 
     -ms-transition:height 0.2s ease-out; 
     transition:height 0.2s ease-out; 
    } 
    /*Set height of the slide*/ 
    .vertical :target{ height:auto; width:100%; } 

    .vertical .containeranimation{ 
    height: 390px !important; 
    } 
    .vertical section h2 { position:relative; left:0; top:-15px; } 

    /*Set position of the number on the slide*/ 
    .vertical section:after{ top:-60px;left:810px;} 
    .vertical section:target:after{ left:-9999px;} 
    </style> 

希望有人会拉我通过这个问题。

Answer 1

如果使用

#videos1 

您urllink即的index.html＃videos1它将被defoult打开后