Я пытаюсь вызвать навигационную панель (navbar.html) в мой index.html.Navbar.html имеет свой собственный css, а внутри navbar.html - скрипт, который меняет класс <li> при нажатии <a>.
Мне удалось сделать <li> для изменения выделения, но когдаЯ нажимаю <a> не остается выделенным на новой странице.
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<title></title>
</head>
<body>
<!--NAVIAGTION BAR-->
<div id="navbar-placeholder">
</div>
<script>
$(function(){
$("#navbar-placeholder").load("Files/navbar.html");
});
</script>
<!--END OF NAVIGATION BAR-->
</body></html>
navbar.html
<link rel="stylesheet" href="css/navbar.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div class="navigation">
<ul>
<li class=""><a href="work.html">Work</a></li>
<li class="active"><a href="index.html">Home</a></li>
<li class=""><a href="contact.html">Contact</a></li>
</ul>
</div>
<script>
$(document).ready(function() {
$(".navigation li").click(function() {
$(".navigation li").removeClass("active");
$(this).addClass("active");
});
});
</script>
navbar.css
.navigation{
position: fixed;
top: 0;
width: 100%;
background-color:#262126;
text-align: center;
}
.navigation ul{
margin: 0;
}
.navigation li{
display: inline-block;
padding: 15px 30px;
margin: 10px 5px 0px 5px;
text-decoration: none;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
}
.navigation a{
color: white;
text-decoration: none;
text-transform: capitalize;
}
.navigation li:hover{
background-color: #F2F2F2;
transition: 0.4s;
}
.navigation li:hover a{
color: black;
}
.navigation li.active{
background-color: #F2F2F2;
}
.navigation li.active a{
color: black;
}