【动效效果】梯形层叠选项卡切换效果

Horizon3D

已于 2024-11-15 10:51:08 修改

阅读量589

点赞数 10

文章标签： css 前端

于 2024-01-24 15:13:56 首次发布

本文链接：https://blog.youkuaiyun.com/qq_30907143/article/details/135822901

版权

本文详细介绍了如何使用jQuery和CSS3创建一个可切换的UI组件，通过改变z-index和背景颜色实现在三个选项之间的切换，同时带有动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

实现代码

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>切换</title>

  <!-- 需要自行引入jquery -->

  <script type="text/javascript" src="{pboot:sitedomain}/skin/js/jquery-1.8.3.min.js">

</head>
<style>
  #leftabs {
    position: absolute;
    top: 18px;
    left: -32px;
  }

  #leftabs ul li {
    height: 60px;
    width: 10px;
    position: relative;
    line-height: 30px;
    padding: 30px 10px;
    background-color: #002FFD;
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
    transition: background-color 0.3s ease;

  }

  #leftabs ul li span {
    position: relative;
    z-index: 2;
  }

  #leftabs ul :nth-child(2) {
    position: absolute;
    top: 82px;
    z-index: 98;
  }

  #leftabs ul :nth-child(3) {
    position: absolute;
    top: 170px;
    z-index: 97;
  }

  #leftabs ul li.active {
    color: #002FFD;
    background-color: #fff;
    z-index: 99;
  }
</style>
<body>
  <div id="leftabs">
        <ul>
          <li class="active tabItem" onclick="changeZIndex(this)"><span>安<br />全</span></li>
          <li class="tabItem" onclick="changeZIndex(this)"><span>供<br />应</span></li>
          <li class="tabItem" onclick="changeZIndex(this)"><span>商<br />品</li>
        </ul>
      </div>
</body>

<script type="text/javascript">

    $(function () {
      $('.news-title a').first().addClass('current')
    })
    function changeZIndex(element) {
      $(".tabItem").css("z-index", "auto");
      $(".tabItem").css("background-color", "#002FFD");
      $(".tabItem").css("color", "#fff")
      $(element).css("z-index", "100"); 
      $(element).css("background-color", "#fff")
      $(element).css("color", "#002FFD")
    }
  </script>