Animierte Tabs mit erstem Inhalt aktiv

Question

Ich habe diese animierten Tabs in CSS-Code geschrieben und ich versuche, den ersten Inhalt sichtbar (aktiv) beim Laden der Homepage zu setzen, muss nicht darauf klicken, um es zu lesen .. Dies kann Arbeit mit 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> 

Dieses jQuery-Code zu Ihrem Projekt.

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

Answer 2

Hallo, Sie müssen diesen JavaScript-Code zu Ihrer HTML-Seite hinzufügen.

window.onload = function() { this.location = this.location + "# No1-Container"; };