Анимация 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>

Пожалуйста, добавьте минимальный воспроизводимый пример

— 12.02.2019 16:45

Вам нужно включить файлы JavaScript и CSS, которые находятся в настройках, в данном случае jquery и fontawesome.

— 12.02.2019 16:54

javascript html css

12.02.2019 16:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Вы забыли добавить библиотеку 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>

12.02.2019 16:46

Другие вопросы по теме

Включить статический файл CSS последним (для брендинга)

Bootstrap требует проверки, чтобы выбрать один из раскрывающихся списков

Как изменить размер модального окна начальной загрузки в соответствии с размером iframe?

Введите выбранный текст, но только при первом фокусе (на мобильном телефоне)

Uncaught ReferenceError: firebase не определен в веб-приложении

Вертикальный зигзагообразный бордюр слева и справа от тела

Предварительный просмотр изображения перед загрузкой

Найдите тег изображения внутри p с определенным классом, используя jquery

Имя пользователя и пароль не передаются на одну и ту же страницу

Неопределенный индекс, хотя и объявлен

Анимация JavaScript не связана с HTML

Ответы 1

Другие вопросы по теме

Похожие вопросы