:target与锚点元素的可用性隐藏实例页面

展示

回到相关文章 »

代码

CSS代码:
#weatherYubao2 {
    display:none;
}
.weatherYubao:target #weatherYubao2 {
    display: block;
}
.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>