stackoom
  简体   繁体   中英

JavaScript animation not linking with HTML

 原文  2019-02-12 15:41:51  8   1    javascript/ html/ css

Question

Upon copying this code from here: https://codepen.io/nenadkaevik/pen/odyrGm?editors=1111

And linking it with my CSS and JavaScript saved in the same file it doesn't seem to work, everything works apart from the buttons and animations upon clicking. 

 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>

1 answers

solution1
 0  2019-02-12 15:46:53

Did you forget to add jquery library?

Lets try this 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Javascript and HTML linking Linking HTML Checkbox to Javascript linking JavaScript to HTML file Javascript not linking to html file Linking JavaScript to my HTML Linking Html files with javascript Linking javascript file to html HTML/JavaScript Linking Dynamically linking html pages with javascript Trouble linking javascript to html button
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM