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>
相关推荐
孩子 你要相信光7 分钟前
css之一个元素可以同时应用多个动画效果
前端·css
huangql52018 分钟前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days205034 分钟前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端1 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿1 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉1 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~1 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
matlab的学徒1 小时前
Web与Nginx网站服务(改)
linux·运维·前端·nginx·tomcat
从零开始学习人工智能2 小时前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html
虫虫rankourin2 小时前
在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法
前端·react.js