如何根据日期显示某些div

时间:2014-05-28 01:30:01

标签: javascript jquery html css

我试图根据日期显示特定的div。 div被分开了几个月。只显示当前月份和下个月。下面的代码是我如何设置它,但我知道我丢失了代码。我只是不知道还有什么可以添加来使这项工作。

注意:我试图设置它,所以我不必调出特定的div id,这样我每个月都不必进去并改变代码显示接下来的两个div。

HTML

<div id="1">
  MONTH ONE CONTENT
</div>
<div id="2">
  MONTH TWO CONTENT
</div>
<div id="3">
  MONTH THREE CONTENT
</div>

CSS

<style>
  #1, #2, #3 {display: none;}
</style>

JAVASCRIPT

<script type="text/javascript">
  var date=new Date();
  var one_month = new Date(today.getFullYear(), today.getMonth()+1, 1);
  var two_month = new Date(today.getFullYear(), today.getMonth()+1, 1);

  $(document).ready(function() {
    $(one_month).css('display','block');
    $(two_month).css('display','block');
  });
</script>

2 个答案:

答案 0 :(得分:0)

<强> HTML

<div id="monthContent">
    <div id="one">
      MONTH ONE CONTENT
    </div>
    <div id="two">
      MONTH TWO CONTENT
    </div>
    <div id="three">
      MONTH THREE CONTENT
    </div>
    ...
</div>

<强> CSS

#monthContent > div {display: none;}

<强>脚本

var d = new Date();
var month = d.getMonth() + 1;
var nextMonth = month + 1;
nextMonth = nextMonth == 13 ? 1 : nextMonth;

  $(document).ready(function() {
      $( "#monthContent>div:nth-child(" + month + ")").show();
      $( "#monthContent>div:nth-child(" + nextMonth + ")").show();
  }); 

答案 1 :(得分:0)

ID不允许以数字开头,但课程可以。

http://jsfiddle.net/marathonman/6CwSY/

HTML

<div id="months"> <div id="m1">1</div> <div id="m2">2</div> <div id="m3">3</div> <div id="m4">4</div> <div id="m5">5</div> <div id="m6">6</div> <div id="m7">7</div> <div id="m8">8</div> <div id="m9">9</div> <div id="m10">10</div> <div id="m11">11</div> <div id="m12">12</div> </div>

CSS

#months > div { display: none; }

SCRIPT

var d = new Date(); //getMonth() method returns 0 to 11 var m = d.getMonth() + 1; $('#m' + (m) + ',#m' + ((m + 1) % 12)).show();

谢谢你杰里米,更新了12年