通过选择年份然后选择月份来显示归档文件
问题描述：
我正在尝试构建我的归档页面，使其具有一排年和一排月份。然后，用户将不得不选择一年，然后选择一个月并生成一个帖子库。我在下面有一个我想要的示例图片。我怎么能做到这一点？我在网上搜索，我找不到类似的东西。我已经添加了一个模型HTML和CSS应该看起来如何，但我无法弄清楚如何让它工作。任何帮助，将不胜感激！我有HTML和CSS这里http://codepen.io/anon/pen/egpZqr通过选择年份然后选择月份来显示归档文件
我想要什么的代码笔...
我目前的页面archive.php
<?php
get_header(); ?>
<div class="page-header">
<h1>ARCHIVE</h1>
</div>
<div class="archive-block">
\t <span class="archive-block__alert">
\t \t Please Select A Year First \t </span>
\t <ul class="archive-block__list archive-block__list--year">
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2009">
\t \t \t \t \t 2009 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2010">
\t \t \t \t \t 2010 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2011">
\t \t \t \t \t 2011 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2012">
\t \t \t \t \t 2012 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2013">
\t \t \t \t \t 2013 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2014">
\t \t \t \t \t 2014 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2015">
\t \t \t \t \t 2015 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2016">
\t \t \t \t \t 2016 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year archive-block__selector--current-year" data-year="2017">
\t \t \t \t \t 2017 \t \t \t \t </span>
\t \t \t </li>
\t \t
\t </ul>
\t <ul class="archive-block__list archive-block__list--month">
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month archive-block__selector--current-month" data-month="1">
\t \t \t Jan \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="2">
\t \t \t Feb \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="3">
\t \t \t Mar \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="4">
\t \t \t Apr \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="5">
\t \t \t May \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="6">
\t \t \t Jun \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="7">
\t \t \t Jul \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="8">
\t \t \t Aug \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="9">
\t \t \t Sep \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="10">
\t \t \t Oct \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="11">
\t \t \t Nov \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="12">
\t \t \t Dec \t \t </span>
\t </li>
\t \t \t </ul>
</div>
<div class="archive-block__empty-con">
\t <span class="archive-block__empty">
\t \t That combination is empty! Please select a different combination \t </span>
</div>
<?php get_footer(); ?>和css
.archive-block {
float: none !important;
margin: 0;
width: 100%;
max-width: 930px;
margin: 0 auto;
text-align: center;
}
.archive-block__alert {
display: none;
}
.archive-block__list {
padding-bottom: 15px;
padding-top: 15px;
display: block;
margin: 0;
}
.archive-block__list--month {
border-top: 1px solid #000000;
}
.archive-block__empty-con {
text-align: center;
}
.archive-block__item {
list-style: none;
display: inline-block;
vertical-align: top;
padding: 0 23.5px;
}