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

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

代码语言：html

所属分类：选项卡

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

下面为部分代码预览，完整代码请点击下载或在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 {
          color: #fff;
          font-family: "Lato";
        }
        .glide__bullets button:nth-child(1):before {
          content: "test 1";
        }
        .glide__bullets button:nth-child(2):before {
          content: "test 2";
        }
        .glide__bullets button:nth-child(3):before {
          content: "test 3";
        }
        .glide__bullets button:nth-child(4):before {
          content: "test 4";
        }
        .glide__bullets button:nth-child(5):before {
          content: "test 5";
        }
        .glide__bullets:after {
          content: "";
          width: 278px;
          height: 1px;
          background-color: rgba(92, 85, 122, 0.2);
          margin: 0 auto;
          margin-top: 4px;
          position: absolute;
          left: 0;
          right: 0;
        }
        .glide__bullets > * {
          height: 10px;
          width: 10px;
          z-index: 5;
        }
        
        .glide__bullets > *:focus {
          background-color: #fff !important;
        }
        
        .glide__slide {
          padding: 20px 0;
        }
        .glide__slide .card {
          background: #803A94;
          border: #ddd;
          border-radius: 5px;
          box-shadow: 0 0 10px transparent;
          cursor: pointer;
          display: flex;
          height: 340px;
          margin: 5px 10px;
          opacity: 0.4;
          padding: 10px 15px;
          position: relative;
          transition: all 0.2s linear;
        }
        .glide__slide .card .content {
          color: #fff;
          margin: auto;
        }
        .glide__slide.active .card {
          box-shadow: 0 5px 15px rgba(50, 50, 50, 0.2);
          opacity: 1;
          height: 350px;
          margin-top: -10px;
        }
        
        .pen-description {
          margin: 60px 0;
          text-align: center;
        }
        .pen-description .summary {
          margin-bottom: 10px;
        }
        .pen-description .note {
          color: #555;
          font-size: 0.85rem;
        }
        
        .container {
          background-color: #271E4F;
          padding: 30px;
          border-radius: 3px;
          width: 400px;
          margin: 0 auto;
          box-shadow: 0 5px 15px rgba(39, 30, 79, 0.3);
        }
        .container--short {
          height: auto;
          margin-bottom: 30px;
          padding-bottom: 20px;
        }
        .container--tall {
          height: 490px;
          margin-bottom: 50px;
        }
        
        .bar {
          margin: 0 auto;
          display: flex;
          position: relative;
          justify-content: space-between;
        }
        .bar:after {
          background-color: rgba(92, 85, 122, 0.2);
          content: "";
          position: absolute;
          display: block;
          left: 0;
          right: 0;
          margin: auto;
          top: 4px;
          width: 85%;
          height: 1px;
        }
        
        .dot {
          color: #5C557A;
          cursor: pointer;
          font-size: 0.85rem;
          padding: 10px;
          padding-top: 20px;
          position: relative;
          text-align: center;
.........完整代码请登录后点击上方下载按钮下载查看