JavaScript 动画未与 HTML 链接_JavaScript

从这里复制此代码后： :

并将它与保存在同一个文件中的 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 ai { 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>

您是否忘记添加库？

让我们试试这个 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>

JavaScript 动画未与 HTML 链接

问题描述

1楼