androidstudio改变一个布局页面的一个按钮id另一个布局页面也会变_【前端艺术】html5和css3响应式全屏滚动页面切换源码...

这是一款全屏响应式的HTML5和CSS3页面切换效果。这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的。

HTML

wrapper div的class为st-container，里面包含作为导航按钮的radio和用于页面切换的面板st-scroll。

<div class="container"><div class="st-container"><input type="radio" name="radio-set" checked="checked" id="st-control-1" /><a href="#st-panel-1">Serendipitya><input type="radio" name="radio-set" id="st-control-2" /><a href="#st-panel-2">Happinessa><input type="radio" name="radio-set" id="st-control-3" /><a href="#st-panel-3">Tranquillitya><input type="radio" name="radio-set" id="st-control-4" /><a href="#st-panel-4">Positivitya><input type="radio" name="radio-set" id="st-control-5" /><a href="#st-panel-5">Passiona><div class="st-scroll"><section class="st-panel" id="st-panel-1"><div class="st-deco" data-icon="H">div><h2>Serendipityh2><p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.p><p><a class="htmleaf-icon icon-home" href="http://www.zzfriend.com/" title="蚂蚁HTML5社区" target="_blank"><span> 蚂蚁HTML5社区span>a> |<a class="htmleaf-icon icon-arrow-right3" href="http://www.zzfriend.com/h5game/" title="蚂蚁HTML5社区手机游戏" target="_blank"><span> 蚂蚁HTML5社区手机游戏span>a>p>section><section class="st-panel st-color" id="st-panel-2"><div class="st-deco" data-icon="2">div><h2>Happinessh2><p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.p>section><section class="st-panel" id="st-panel-3"><div class="st-deco" data-icon="B">div><h2>Tranquillityh2><p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.p>section><section class="st-panel st-color" id="st-panel-4"><div class="st-deco" data-icon="x">div><h2>Positivityh2><p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.p>section><section class="st-panel" id="st-panel-5"><div class="st-deco" data-icon="Ç">div><h2>Passionh2><p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.p>section>div>div>div>

我们要做的事情是改变面板的高度值，使点击导航按钮时相应的面板显示在屏幕上。可以通过兄弟选择器来在按钮点击时获取正确的面板。我们需要radio按钮和st-scroll在dom结构的同一层上，并且要在超链接的上部(超链接的透明度将会被设置为0，使其不可见)。为了正确选择面板，我们还要给每个面板和radio按钮一个id。

引入CSS代码

'https://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel="stylesheet" "stylesheet" "stylesheet" 

阅读原文-演示/下载源码，还有更多更好玩的开源代码等你哦！