JQuery简单标签页实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
  <style>
    .choose {
      margin: .5em 0;
      border-top: solid 1px #ccc;
      border-bottom: solid 1px #ccc;
    }

    .choose-show {
      padding: .5em;
      font-size: 14px;
    }

    .choose-hidden {
      position: relative;
      z-index: 999;
    }

    .choose-hidden-nav {
       50%;
      float: left;
    }

    .choose-hidden-nav ul {
      border-top: solid 1px #ccc;
      border-bottom: solid 1px #ccc;
    }

    .choose-hidden-nav ul li {
      padding: 6px 0 6px 0;
      background-color: #ccdce0;
    }

    .choose-hidden-nav ul li.active {
      background-color: #d9f5fc;
    }

    .choose-hidden-content {
       50%;
      float: left;
    }

    .choose-hidden-content ul {
      border-top: solid 1px #ccc;
      border-bottom: solid 1px #ccc;
      background-color: #d9f5fc;
    }

    .choose-hidden-content ul li {
      padding: 6px 0 6px 0;
    }
  </style>
</head>

<body>
<div class="choose">
  <div class="choose-show">防冻液更换 <i class="fa fa-chevron-down"></i></div>
  <!--BEGIN CHOOSE-HIDDEN -->
  <div class="choose-hidden" style="display:none">
    <div class="choose-hidden-nav">
      <ul>
        <li class="active" name="cont1"><a>汽车美容</a></li>
        <li name="cont2"><a>美容</a></li>
      </ul>
    </div>
    <div class="choose-hidden-content cont1">
      <ul class="active">
        <li><a>洗车</a></li>
        <li><a>护理</a></li>
      </ul>
    </div>
    <div class="choose-hidden-content cont2" style="display:none">
      <ul>
        <li><a>234</a></li>
        <li><a>234</a></li>
      </ul>
    </div>
  </div>
  <!--END CHOOSE-HIDDEN -->
</div>
<script src="jQuery-2.1.4.min.js"></script>
<script>
  $(".choose-show").click(function () {

    $(".choose-hidden").toggle();

  })

  $("document").ready(function () {

    $(".choose-hidden-nav>ul>li").each(function () {

      $(this).click(function () {

        if (!$(this).hasClass('active')) {

          $(this).addClass('active').siblings('.active').removeClass('active');

        } else {

          $(this).siblings('.active').removeClass('active');

        }

        var target = $(this).attr('name');

        $("." + target).show();

        $("." + target).siblings('.choose-hidden-content').hide();

      });

    });

  });

</script>
</body>

</html>

相关阅读:
shell脚本基础
 rtsp冷门解释
 C++基础之动态内存
 树莓派3安装ros
Trie树
 [LeetCode]The Skyline Problem
[LeetCode]Implement Trie (Prefix Tree)
C++基础之适配器
 配置树莓派3的openwrt中的网络
 [LeetCode]Self Crossing
原文地址：https://www.cnblogs.com/Man-Dream-Necessary/p/5607361.html