jquery Tab切换,CSS3制作发光字

jquery Tab切换,CSS3制作发光字

代码如下

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Tab</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    ul {
      list-style: none;
    }

    .container {
      margin: 10px auto;
      width: 300px;
      height: 500px;
      border: 2px solid #e7e7e7;
      border-radius: 10px;
    }

    .container h4 {
      text-align: center;
      height: 50px;
      line-height: 50px;
      font-size: 24px;
      background-color: #909399;
      color: #FFF;
      border-top-right-radius: 8px;
      border-top-left-radius: 8px;

      letter-spacing: 24px;
      padding-left: 16px;

      /* font: bold 24px "Microsoft YaHei"; */
      text-shadow: 1px 1px rgba(197, 223, 248, 0.8),
        2px 2px rgba(197, 223, 248, 0.8),
        3px 3px rgba(197, 223, 248, 0.8),
        4px 4px rgba(197, 223, 248, 0.8),
        5px 5px rgba(197, 223, 248, 0.8),
        6px 6px rgba(197, 223, 248, 0.8);
    }

    /* tab */
    #coupon {
      border-top: 2px solid #e7e7e7;
      height: 26px;
      border-bottom: 2px solid #e7e7e7;
    }

    #coupon>li {
      float: left;
      display: inline-block;
      width: 100px;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      color: rgb(177, 175, 175);
      box-sizing: border-box;
      text-align: center;
      cursor: pointer;
      margin-top: -2px;
      margin-bottom: -2px;
    }

    #coupon>li:first-child {
      border-left: 0;
      border-right: 0;
    }

    #coupon>li:last-child {
      border-left: 0;
      border-right: 0;
    }

    #coupon .active {
      border: none;
      background: #409eff;
      border-radius: 2px;
      color: #fff;
    }

    /* 优惠券内容 */
    #coupon-contain {
      margin: 10px 5px;
    }

    #coupon-contain>div>div {
      margin: 10px 5px;
      text-align: center;
      height: 40px;
      line-height: 40px;
      border-radius: 8px;
      background: #f56c6c;
      color: #fff;
      font-size: 14px;
    }

    /* 隐藏所有优惠券 */
    #coupon-contain>div {
      display: none;
    }

    /* 显示class为show的元素 */
    #coupon-contain>.show {
      display: block;
    }

    #coupon-contain>div:first-child>div {
      background: #67c23a;
    }

    #coupon-contain>div:last-child>div {
      background: #909399;
    }
  </style>

  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
  <script>
    $(function () {
      var $coupon_tab = $("#coupon>li");
      var $coupon_contain = $('#coupon-contain>div');
      var index = 0;

      $coupon_tab.click(function () {
        // 移除tab中class的active属性
        $($coupon_tab[index]).removeClass('active');
        // 移除优惠券中class的active属性
        $($coupon_contain[index]).removeClass('show');
        index = $(this).index();
        // 添加tab中class的active属性
        $(this).addClass('active');
        // 添加优惠券中class的active属性
        $($coupon_contain[index]).addClass('show');
      });
    });
  </script>
</head>

<body>
  <div class="container">
    <h4>优惠券</h4>
    <ul id="coupon">
      <li class="active">未使用</li>
      <li>已使用</li>
      <li>已过期</li>
    </ul>
    <div id="coupon-contain">
      <div id="coupon-unused" class="show">
        <div>未使用的优惠券</div>
        <div>未使用的优惠券</div>
        <div>未使用的优惠券</div>
      </div>
      <div id="coupon-used" class="hide">
        <div>已使用的优惠券</div>
        <div>已使用的优惠券</div>
        <div>已使用的优惠券</div>
      </div>
      <div id="coupon-expired" class="hide">
        <div>已过期的优惠券</div>
        <div>已过期的优惠券</div>
        <div>已过期的优惠券</div>
      </div>
    </div>
  </div>
</body>

</html>
相关推荐
伍哥的传说1 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi9878381 小时前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为