Моя простая 1 строка кода для переключения по какой-то причине не работает. Ниже приведен код. Пожалуйста, посоветуйте.
Как ни странно, когда я попытался запустить свой код в jsfiddle. net он работал просто отлично, когда я добавил !important
в мой класс .highlightedbutton, но он все еще не ' я не работал в двух браузерах - Chrome и Safari. По рекомендации Рори я избавился от атрибута onload и сделал его событием $ (document) .ready (). Ничто, кажется, не работает в зависании до сих пор.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Jquery Project - Code Player </title>
<script type = "text/javascript" src ="jquery-3.4.1.min.js"> </script>
<link href="jquery-ui/jquery-ui.css" rel ="stylesheet">
<script src = "jquery-ui/jquery-ui.js"> </script>
<style type="text/css">
h3, html, body {
font-family:Helvetica, sans-serif;
margin:0px;
padding:0px;
}
#header-bar {
width:100%;
height:50px;
background-color:#EDEDED;
}
h3 {
padding:14px 400px 0px 5px;
float:left;
}
.button {
width:100px;
background-color:#EDEDED;
margin:10px 0;
border: 1px solid black;
color:black;
padding:5px;
display:inline-block;
text-align:center;
text-decoration:none;
font-size:12px;
float:left;
border-radius:5px;
}
.highlightedButton {
background-color:red !important;
}
.activeButton {
background-color:#F5FEFE;
}
</style>
</head>
<body>
<div id ="header-bar">
<h3> CodePlayer </h3>
<div class ="button-group">
<button id ="html" class ="button"> HTML </button>
<button id ="css" class ="button"> CSS </button>
<button id ="js" class ="button"> JavaScript </button>
<button id ="output" class ="button"> Output </button>
</div>
</div>
<div id ="panel">
<textarea id ="contentHTML"></textarea>
</div>
<script type ="text/javascript">
$(document).ready(function() {
$("#html").addClass("activeButton");
});
$(document).ready(function() {
$(".button").hover(function() {
$(this).toggleClass("highlightedbutton");
});
});
</script>
</body>
</html>