时间戳

首页 > 解决方案 > JavaScript 动画未与 HTML 链接

javascript - JavaScript 动画未与 HTML 链接

问题描述

从这里复制此代码后：https ://codepen.io/nenadkaevik/pen/odyrGm?editors=1111

并将它与我保存在同一个文件中的 CSS 和 JavaScript 链接起来，它似乎不起作用，除了单击时的按钮和动画之外，一切都有效。

var tabs = $('.tabs');
var items = $('.tabs').find('a').length;
var selector = $(".tabs").find(".selector");
var activeItem = tabs.find('.active');
var activeWidth = activeItem.innerWidth();
$(".selector").css({
  "left": activeItem.position.left + "px",
  "width": activeWidth + "px"
});

$(".tabs").on("click", "a", function(e) {
  e.preventDefault();
  $('.tabs a').removeClass("active");
  $(this).addClass('active');
  var activeWidth = $(this).innerWidth();
  var itemPos = $(this).position();
  $(".selector").css({
    "left": itemPos.left + "px",
    "width": activeWidth + "px"
  });
});
@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
  font-family: 'Roboto', sans-serif;
}

h2 {
  margin: 0px;
  text-transform: uppercase;
}

h6 {
  margin: 0px;
  color: #777;
}

.wrapper {
  text-align: center;
  margin: 50px auto;
}

.tabs {
  margin-top: 50px;
  font-size: 15px;
  padding: 0px;
  list-style: none;
  background: #fff;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
  display: inline-block;
  border-radius: 50px;
  position: relative;
}

.tabs a {
  text-decoration: none;
  color: #777;
  text-transform: uppercase;
  padding: 10px 20px;
  display: inline-block;
  position: relative;
  z-index: 1;
  transition-duration: 0.6s;
}

.tabs a.active {
  color: #fff;
}

.tabs a i {
  margin-right: 5px;
}

.tabs .selector {
  height: 100%;
  display: inline-block;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  border-radius: 50px;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  background: #05abe0;
  background: -moz-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
  background: -webkit-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
  background: linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05abe0', endColorstr='#8200f4', GradientType=1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <h2>Elastic Tabs</h2>
  <h6>Click on tabs to see them in action</h6>
  <nav class="tabs">
    <div class="selector"></div>
    <a href="#" class="active"><i class="fas fa-burn"></i>Avengers</a>
    <a href="#"><i class="fas fa-bomb"></i>Guardians of The Galaxy</a>
    <a href="#"><i class="fas fa-bolt"></i>Thor</a>
    <a href="#"><i class="fab fa-superpowers"></i>Black Panther</a>
  </nav>
</div>

标签： javascripthtmlcss

解决方案

你忘了添加jquery库吗？

让我们试试这个 html

<!DOCTYPE html>
<html lang="en"
    class="">

<head>
    <meta http-equiv="Content-Type"
        content="text/html; charset=UTF-8">
    <script src="./index_files/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js.download"></script>
    <script src="./index_files/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js.download"></script>
    <meta name="robots"
        content="noindex">
    <link rel="shortcut icon"
        type="image/x-icon"
        href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico">
    <link rel="mask-icon"
        type=""
        href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg"
        color="#111">
    <link rel="canonical"
        href="https://codepen.io/nenadkaevik/pen/odyrGm?editors=1111">

    <link rel="stylesheet"
        href="./index_files/all.css">
    <style class="cp-pen-styles">
        @import url('https://fonts.googleapis.com/css?family=Roboto');

        body {
            font-family: 'Roboto', sans-serif;
        }

        h2 {
            margin: 0px;
            text-transform: uppercase;
        }

        h6 {
            margin: 0px;
            color: #777;
        }

        .wrapper {
            text-align: center;
            margin: 50px auto;
        }

        .tabs {
            margin-top: 50px;
            font-size: 15px;
            padding: 0px;
            list-style: none;
            background: #fff;
            box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
            display: inline-block;
            border-radius: 50px;
            position: relative;
        }

        .tabs a {
            text-decoration: none;
            color: #777;
            text-transform: uppercase;
            padding: 10px 20px;
            display: inline-block;
            position: relative;
            z-index: 1;
            transition-duration: 0.6s;
        }

        .tabs a.active {
            color: #fff;
        }

        .tabs a i {
            margin-right: 5px;
        }

        .tabs .selector {
            height: 100%;
            display: inline-block;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 1;
            border-radius: 50px;
            transition-duration: 0.6s;
            transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

            background: #05abe0;
            background: -moz-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
            background: -webkit-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
            background: linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#05abe0', endColorstr='#8200f4', GradientType=1);
        }

    </style>
</head>

<body>
    <div class="wrapper">
        <h2>Elastic Tabs</h2>
        <h6>Click on tabs to see them in action</h6>
        <nav class="tabs">
            <div class="selector"
                style="width: 138.5px;"></div>
            <a href="https://www.google.com/_/chrome/newtab?rlz=1C1CHBF_deDE787DE787&amp;ie=UTF-8#"
                class="active"><i class="fas fa-burn"></i>Avengers</a>
            <a href="https://www.google.com/_/chrome/newtab?rlz=1C1CHBF_deDE787DE787&amp;ie=UTF-8#"><i class="fas fa-bomb"></i>Guardians of The Galaxy</a>
            <a href="https://www.google.com/_/chrome/newtab?rlz=1C1CHBF_deDE787DE787&amp;ie=UTF-8#"><i class="fas fa-bolt"></i>Thor</a>
            <a href="https://www.google.com/_/chrome/newtab?rlz=1C1CHBF_deDE787DE787&amp;ie=UTF-8#"><i class="fab fa-superpowers"></i>Black Panther</a>
        </nav>
    </div>
    <script src="./index_files/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js.download"></script>
    <script src="./index_files/jquery.min.js.download"></script>
    <script>var tabs = $('.tabs');
        var items = $('.tabs').find('a').length;
        var selector = $(".tabs").find(".selector");
        var activeItem = tabs.find('.active');
        var activeWidth = activeItem.innerWidth();
        $(".selector").css({
            "left": activeItem.position.left + "px",
            "width": activeWidth + "px"
        });


        $(".tabs").on("click", "a", function(e) {
            e.preventDefault();
            $('.tabs a').removeClass("active");
            $(this).addClass('active');
            var activeWidth = $(this).innerWidth();
            var itemPos = $(this).position();
            $(".selector").css({
                "left": itemPos.left + "px",
                "width": activeWidth + "px"
            });

        });
    </script>
</body>

</html>

推荐阅读