jquery - 网站日历 slider

Question

我想显示 3 天事件的日历。我希望它看起来像这样:

第 1、2、3 天是链接，单击时我希望日历像 slider 一样滑动到下一个日历。我一直在网上搜索“html 网站日历显示”、“jquery 日历插件”等内容，但没有找到我想要的东西。我真的不明白我将如何实现它，这是纯 html+css 还是它有 jquery？我在哪里可以找到一些演示/教程来设计和实现上述日历？

Answer 1

新: jsBin demo with hidden data inside fields and popup

jsBin demo

jQuery:

var start_day = 0; // set your start day to show first!

$('.day').fadeTo(0,0.3).eq(start_day).fadeTo(0,1);
$('ul#calendar_navigation li').eq(start_day).addClass('active');
  
var calWidth = $('#calendar').width();

$('ul#calendar_navigation li').click(function(){
  
    $('ul#calendar_navigation li').removeClass('active');
    $(this).addClass('active');
  
    var thisIndex = $(this).index();
  
    $('.day').stop().fadeTo(300,0.3).eq(thisIndex).fadeTo(300,1);
    $('#days').stop().animate({left: '-'+calWidth*thisIndex },800);
  
});

HTML:

    <ul id="calendar_navigation">
      <li>Day 1</li>
      <li>Day 2</li>
      <li>Day 3</li> 
    </ul>

    <div id="days">
      
     <div class="day">
        <table>
          <thead>
            <tr>
              <th>Day 1 (oct 3)</th>
              <th>Big room</th>
              <th>Medium room</th>
              <th>Small room #1</th>
              <th>Small room #2</th>
              <th>Small room #3</th>
            </tr>
          </thead>
          <tbody>           
            <tr>
              <td>10:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>        
            <tr>
              <td>11:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>            
            <tr>
              <td>12:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>                            
          </tbody>
       </table>  
    </div>    
    <!-- -->
     <div class="day">
        <table>
          <thead>
            <tr>
              <th>Day 2 (oct 4)</th>
              <th>Big room</th>
              <th>Medium room</th>
              <th>Small room #1</th>
              <th>Small room #2</th>
              <th>Small room #3</th>
            </tr>
          </thead>
          <tbody>           
            <tr>
              <td>10:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>        
            <tr>
              <td>11:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>            
            <tr>
              <td>12:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>                            
          </tbody>
       </table>  
    </div>
   <!-- -->
     <div class="day">
        <table>
          <thead>
            <tr>
              <th>Day 3 (oct 5)</th>
              <th>Big room</th>
              <th>Medium room</th>
              <th>Small room #1</th>
              <th>Small room #2</th>
              <th>Small room #3</th>
            </tr>
          </thead>
          <tbody>           
            <tr>
              <td>10:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>        
            <tr>
              <td>11:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>            
            <tr>
              <td>12:00</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>                            
          </tbody>
       </table>  
    </div>      
      
    </div><!-- days -->

  </div>
  </div><!-- cal. wrapper -->

CSS:

body{
  font-family:arial;
}
/* CALENDAR */
#calendar_wrapper{
  position:relative;
  margin:0 auto;
  width:100%;
  overflow:hidden;
}
#calendar{
  position:relative;
  margin:0 auto;
  width:800px;
}
ul#calendar_navigation{
  list-style:none;
  padding:0;
  font-size:30px;
  height:30px;
}
ul#calendar_navigation li{
  padding-right:30px;
  display:block;
  float:left;
  list-style:none; 
}
ul#calendar_navigation li.active{
  list-style:none; 
  border-bottom:5px solid #C5FF74;
}
#days{
  clear:both;
  position:relative;
  width:999999px;
}
.day{
  position:relative;
  float:left;
  left:0px;
  width:800px;
  box-shadow:0px 2px 4px #999;
}

#calendar table{
    font-size:13px;
    width:100%;
}

#calendar table tr th,
#calendar table tr td{
  vertical-align:middle;
  height:50px;
  width:15%;
  padding:1%;
}
#calendar table tr td{
  background-color:#C5FF74;
}

#calendar table tr{
  vertical-align:middle;
}

#calendar table tr td:first-child{
  width:140px;
}