:target与锚点元素的动画形式的显示与隐藏实例页面

查看未来4-7天天气预报 收起未来4-7天天气预报 天气图例 上海天气预报 (2013-08-25 11:00发布)

日期	天气现象	气温	风向	风力

25日星期日	白天		中雨	高温 34℃	西南风	3-4级
	夜间		中雨	低温 26℃	东北风	3-4级

26日星期一	白天		中雨	高温 29℃	东北风	3-4级
	夜间		阴	低温 26℃	东北风	3-4级

27日星期二	白天		多云	高温 32℃	东北风	3-4级
	夜间		多云	低温 27℃	南风	3-4级

未来4-7天天气预报（2013-08-24 18:00发布）    仅供参考

28日星期三	白天		多云	高温 34℃	南风	3-4级
	夜间		多云	低温 28℃	南风	3-4级

29日星期四	白天		多云	高温 33℃	南风	3-4级
	夜间		阵雨	低温 25℃	南风	3-4级

30日星期五	白天		阵雨	高温 28℃	东北风	3-4级
	夜间		阵雨	低温 23℃	北风	3-4级

31日星期六

白天

阵雨

高温 28℃

北风

3-4级

代码

CSS代码：

#weatherYubao2 {
    height: 0px;
    overflow: hidden;
    -webkit-transition: height .35s;
    transition: height .35s;
}
.weatherYubao:target #weatherYubao2 {
    height: 300px;
}
.three_day {
    display: none;
}
.weatherYubao:target .three_day {
    display: inline;
}
.weatherYubao:target .seven_day {
    display: none;
}
            

HTML代码：

<div id="7d" class="weatherYubao">
    <h4 class="weatheH1"> 
      上海天气预报 (2013-08-25 11:00发布)                     
      <span>
        <a class="seven_day" href="#7d">查看未来4-7天天气预报</a>
        <a class="three_day" href="#3d">收起未来4-7天天气预报</a>
        <a href="#legend.shtml">天气图例</a>
      </span>      
    </h4>
    <div class="weatherYubaoBox"><!-- 前3天 --></div>
    <div class="weatherYubao" id="weatherYubao2"><!-- 4-7天 --></div>
</div>