第一个内容处于活动状态的动画选项卡

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');
});

Answer 2

嗨，

您需要将此 JavaScript 代码添加到您的 html 页面。

window.onload = function（） { this.location = this.location + "#no1-container";};