javascript - 如何加载菜单的第一个内容？

Question

我正在为一个节日制作一个网站。节日节目分为三天，所以我制作了 3 个按钮来分别加载每一天的内容。

I'd like the first day to display directly when I load the website. How can I do ?

How can I change the button design, so that users could understand that it is 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>

Answer 1

您可以移除其中一种样式

<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:) 关于以上我的建议是不要使用内联样式，而是使用 CSS:

/* FIRST REMOVE ANY INLINE STYLES AND DO: */

.pgfone + .pgfone{ display:none; } /* hide all but first one */

或使用 jQuery

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

这是一个具有所需按钮样式的演示:

$(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>