Да, я только что проверил и обнаружил разницу. Еще раз спасибо за быстрый и эффективный ответ.
му я создаю веб-сайт, где у меня есть несколько элементов div, которые должны скользить справа, слева или сверху, когда пользователь нажимает на определенную кнопку или элементы навигации. Однако ни один из них не работает. Ни один из элементов не будет скользить, когда я нажму на кнопку, которая должна заставить их скользить. Я использую чистый JavaScript для выполнения этих действий. Пока что я пробовал несколько действий. Сначала я думал, что это потому, что у меня не было window.onload, но после добавления ничего не изменилось. Тогда я подумал, что, возможно, ссылки все еще содержат действия по умолчанию, поэтому я попытался добавить e.preventDefault в надежде, что это проблема, но она также не работает. Затем я обнаружил что-то странное, что заставило меня подумать, что, может быть, именно мой компьютер неправильно интерпретирует javascript (странная мысль, я знаю. Но я просто что-то рассматривал, поскольку у меня заканчивались решения). Но на самом деле, оказывается, что мой компьютер или редактор не читает «документ» или окно в JavaScript. Он говорит, что оба они не определены, что странно, так как я правильно связал файл javascript в конце тела. Поэтому я решил запустить его на JSFiddle, чтобы проверить, действительно ли это был только мой компьютер. Однако даже в JSFiddle элементы div не будут скользить, когда я нажимаю кнопку, чтобы они скользили.
У меня нет идей. Поскольку проект, который я делаю, большой, я извлек часть div, которая не скользит, чтобы упростить задачу. Div, который вы, ребята, увидите, должен скользить слева, когда мы нажимаем на тот же div.
Вот HTML-код:
<!DOCTYPE>
<html>
<head>
<title>Emanuel Inacio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css? family=Roboto+Condensed:100,300,400" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="home-page">
<div id="nav-bar"></div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Вот код CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto Condesed', 'San-serif';
}
#nav-bar {
width: 50%;
height: 100vh;
background-color: #000000;
transform: translateX(-50%);
transition: transform 0.5s;
}
.active {
transform: translateX(50%);
}
Наконец, это часть JavaScript:
var nav = document.getElementById("nav-bar");
window.onload = function () {
nav.addEventListener("click", function () {
nav.classList.toggle("active");
});
}
У каждого другого неработающего div есть та же самая база кода, что и у этого. Поэтому я решил опубликовать только этот div. Заранее спасибо!