Question

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

我想在加载网站时直接显示第一天。我能怎么做？

如何更改按钮设计，以便用户能够理解它已加载？

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

Answer 2

所以我看了你的网站，我认为你可以这样做。

将此CSS规则添加到您的页面。

a.learn-more.inactive{
    background-color: gray;
    color: black;
    pointer-events:none;
}

以这种方式使用HTML，使用 data 属性来保存此按钮处于活动状态的日期。最初所有按钮都处于非活动状态

<div class="btn" id="menu">
    <a class="learn-more inactive" data-Date="3">JOUR 1</a>
    <a class="learn-more inactive" data-Date="4">JOUR 2</a>
    <a class="learn-more inactive" data-Date="5">JOUR 3</a>
</div>

然后使用Jquery查找当前日期，然后切换按钮的活动状态。

 var date = new Date();
 var currentDay = date.getDay(); 

 $('a.learn-more[data-Date="'+currentDay +'"]').removeClass('inactive');

This solution is dynamic. In the sense you dont have to change the code on cosecutive days to toggle your buttons. This will automatically calculate which date it is and then activate the button accordingly。所以你可以享受节日，而不是坐下来修补代码：）

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

2 个答案: