优雅的页面动态隐藏标签

最新推荐文章于 2022-09-22 18:20:25 发布

strangerDemon

最新推荐文章于 2022-09-22 18:20:25 发布

阅读量575

点赞数

分类专栏： HTML5 JS 文章标签：标签显示隐藏

本文链接：https://blog.csdn.net/u010071930/article/details/52861274

版权

JS 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

HTML5

4 篇文章 0 订阅

订阅专栏

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

原本一直使用的最“朴素”的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" οnclick="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>