优雅的页面动态隐藏标签

来源：互联网发布：c 语言英文怎么说编辑：程序博客网时间：2024/06/06 12:34

动态的隐藏标签，当一个页面需要根据用户动态选择显示标签时。

原本一直使用的最“朴素”的document.getElementById(“id”).style.display="block"/"none";来控制标签的显示和隐藏

直到有一天一个页面有4种状态，30个标签。看的自己眼睛都花了，而且当标签修改的时候更是痛苦。

以下是目前想到的方法，通过class的类别来控制标签的显示和隐藏，以后增加删除标签的时候js部分也不需要修改。

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>div hidden</title>  </heaad>  <body>    <div class="h">    <div class="human man">      胡子    </div>    <div class="human woman">      化妆包    </div>    <div class="human children">       奶瓶    </div>    <div class="human">      头发    </div>  </div>      <div id="radio">              <div class="radio-box">                    <input name="status" type="radio" id="man" value="man" checked>                    <label for="man">man</label>              </div>              <div class="radio-box">                  <input type="radio" id="woman" value="woman" name="status" >                  <label for="woman">woman</label>              </div>              <div class="radio-box">                  <input type="radio" id="children" value="children" name="status" >                  <label for="children">children</label>              </div>      </div>      <div>          <div>            <input name="" type="button" onclick="load()" value="确定">        </div>      </div>  </body>  <script type="text/javascript" src="jquery.js"></script>  <script>    function load(){      var t=$('input:radio:checked').val();      $('.human').hide();      $('.'+t).show();    }  </script></html>

0 0