JavaScript 动画未与 HTML 链接
[英]JavaScript animation not linking with 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 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 个解决方案
解决方案1
0 2019-02-12 15:46:53
您是否忘记添加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&ie=UTF-8#"
class="active"><i class="fas fa-burn"></i>Avengers</a>
<a href="https://www.google.com/_/chrome/newtab?rlz=1C1CHBF_deDE787DE787&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&ie=UTF-8#"><i class="fas fa-bolt"></i>Thor</a>
<a href="https://www.google.com/_/chrome/newtab?rlz=1C1CHBF_deDE787DE787&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链接
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.