css - 默认打开垂直 css Accordion 的第一部分

Question

我在我的页面中使用了一个 css 样式的 Accordion 菜单。我想要的是默认打开的第一个选项卡。我试着给该部分的第一个 child 固定高度。但它似乎不起作用。

这是我的 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 它将默认打开