jquery+glide实现步骤条选项卡点击切换状态效果代码

代码语言:html

所属分类:选项卡

代码描述:jquery+glide实现步骤条选项卡点击切换状态效果代码

代码标签: jquery lide 步骤条 选项卡 点击 切换

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/glide.core.2.0.9.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/glide.theme.2.0.9.css">

    <style>
        body {
          background: #d6d4db;
          background: linear-gradient(45deg, #d6d4db 0%, #c1dfe3 100%);
          font-family: "Lato";
        }
        
        html, body {
          min-height: 100%;
        }
        
        *, *:after, *:before {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
        
        a {
          color: #7958A6;
          text-decoration: none;
          transition: color 0.2s ease-in-out;
        }
        a:hover {
          color: #553d74;
        }
        
        .glide {
          height: auto;
          margin-top: 60px;
        }
        .glide__bullets {
          display: flex;
          justify-content: space-between;
          left: 0;
          margin: 0 auto;
          right: 0;
          top: -60px;
          width: 300px !important;
        }
        .glide__bullets button {
          position: relative;
        }
        .glide__bullets button:before {
          color: #5C557A;
          position: absolute;
          left: 50%;
          margin-left: -50px;
          padding: 15px 0;
          width: 100px;
          overflow: auto;
        }
        .glide__bullets button.active:before {.........完整代码请登录后点击上方下载按钮下载查看

网友评论0