javascript - How to load the first content of the menu? -

i making website festival. festival program divide in 3 days, made 3 button load content of each days apart.

i'd first day display directly when load website. how can ?

how can change button design, users understand loaded ?

 <script type="text/javascript">     $(document).ready(function () {         $('.btn a').on('click', function(){             var btnindex = $(this).index();             $('.pgf .pgfone').siblings('.pgfone').css({'display':'none'});             $('.pgf .pgfone').eq(btnindex).css({'display':'block'});          });     });     </script>  <div class="btn" id="menu">         <a class="learn-more">jour 1</a>         <a class="learn-more">jour 2</a>         <a class="learn-more">jour 3</a>         </div>      <div class="pgf">              <div class="pgfone" style="display: none;"><?php include('dayone.php'); ?></div>             <div class="pgfone" style="display: none;"><?php include('daytwo.php'); ?>  </div>             <div class="pgfone" style="display: none;"><?php include('daythree.php'); ?></div>      </div> 

you can removing 1 of styles

<div class="pgfone"><?php include('dayone.php'); ?></div> <div class="pgfone" style="display: none;"><?php include('daytwo.php'); ?></div> <div class="pgfone" style="display: none;"><?php include('daythree.php'); ?></div> 

(p.s:) regarding above suggestion not use inline styles, rather css:

/* first remove inline styles , do: */  .pgfone + .pgfone{ display:none; } /* hide first 1 */ 

or using jquery

$(".pgfone").eq(0).show(); 

here's demo required button styling:

$(document).ready(function () {        var $learnbtns = $('.learn-more');        $learnbtns.on('click', function() {      var btnindex = $(this).index();      $learnbtns.removeclass("active").eq(btnindex).addclass("active");      $('.pgfone').hide().eq(btnindex).show();    });      });

.pgfone + .pgfone{ display: none; }  .active{background:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="btn" id="menu">    <a class="learn-more active">jour 1</a>    <a class="learn-more">jour 2</a>    <a class="learn-more">jour 3</a>  </div>    <div class="pgf">    <div class="pgfone">one</div>    <div class="pgfone">two</div>    <div class="pgfone">three</div>  </div>