html - 第一个内容处于事件状态的动画选项卡

Question

我有这个用 CSS 代码编写的动画标签，我试图在加载主页时将第一个内容设置为可见(事件)，而不需要单击它来阅读它。这可以与 javascript 一起使用吗？

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,500,700,900);

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html{
  font-size: 100%;
  font-family: 'Roboto', sans-serif;
  background: #ecf0f1;
}

body{
  font-size: 1rem;
  margin: 0 auto;
}

nav{
  position: fixed;
  width: 100%;
  background: #6e6e6e;
  box-shadow: 0rem 0.1rem  #2c2c2c;
  z-index: 2;
}

nav::after{
  content: '';
  display: block;
  clear: both;
}

nav a{
  text-decoration: none;
  line-height: 4rem;
  font-weight: 800;
  
  float: left;
  width: 50%;
  text-align: center;
  color: #333;
  border-right: solid 1px rgba(0,0,0,0.2);
}

nav a::last-of-type{
  border: 0;
}

nav ul{
  padding: 0;
  margin: 0;
  list-style: none;
}

main{
  position: relative;
  top: 4rem;
}

.container{
  position: absolute;
  width: 90%;
  height: 100%;
  margin: 0 auto;
  left: 5%;
  top: 0;
  
  -webkit-transition: all ease-in-out 0.7s;
  -moz-transition: all ease-in-out 0.7s;
  -ms-transition: all ease-in-out 0.7s;
  -o-transition: all ease-in-out 0.7s;
  transition: all ease-in-out 0.7s;
}

.container:not(:target){
  margin-top: -100%;
  opacity: 0;
}

.container:target{
  margin-top: 0;
  opacity: 1;  
}

<nav>
  <ul>
    <li><a href="#no1-container">No1</a></li>
    <li><a href="#no2-container">No2</a></li>
  </ul> 
</nav>  

<main>
  <section id="no1-container" class="container"> 
    <h1>No1</h1> 
    
    <p>This is first content</p>  
  </section> 
  
  <section id="no2-container" class="container">
    <h1>No2</h1> 
    
    <p>This is second content</p> 
  </section> 
</main>

Answer 1

<nav>
  <ul>
    <li><a href="#no1-container" id="no1-container">No1</a></li>
    <li><a href="#no2-container">No2</a></li>
  </ul> 
</nav>

将此 jQuery 代码添加到您的元素中。

$(document).ready(function() {
    $("#no1-container").trigger('click');
});