I've seen a few posts about this but none have worked for me. Also, I think my problem has to do with the way I'm adding an html 'template' with jQuery. I think this might have to do with the scope but I'm not sure. I'm still a rookie in Web Design.
I'm using the '.active' class from bootstrap and I want to switch that class between the navigation buttons. First I tried to do it following the instructions on these videos and finally from a few different SO posts.
jQuery Tutorial: Add Active Class to Navigation Menu Item Based on URL
Nav Menu Active Click Item with jQuery
This is the code I currently have.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://ift.tt/2wUF5nG">
<link rel="stylesheet" href="../stylesheets/header.css">
<script src="http://ift.tt/2nYZfvi"></script>
<script src="http://ift.tt/2fzsgLv"></script>
<script src="http://ift.tt/2hT5Mpw"></script>
<script type="text/javascript" src="/javascript/header.js"></script>
<title>MNRentals | Dashboard</title>
</head>
<body>
<div id="header"></div>
</body>
</html>
reservations.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://ift.tt/2wUF5nG">
<link rel="stylesheet" href="../stylesheets/header.css">
<script src="http://ift.tt/2nYZfvi"></script>
<script src="http://ift.tt/2fzsgLv"></script>
<script src="http://ift.tt/2hT5Mpw"></script>
<script type="text/javascript" src="/javascript/header.js"></script>
<title> MNRentals | Reservations</title>
</head>
<body>
<div id="header"></div>
</body>
</html>
header.html
<!-- HEADER -->
<header class="main-header">
<div class="row">
<div class="col-md-6">
<div class="logo">
<span class="logo-lg"><b>MN</b>Rentals</span>
</div>
</div>
<div class="col-md-6">
<div class="float-right">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="index.html">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="reservations.html">Reservations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pagos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Propiedades</a>
</li>
</ul>
</div>
</div>
</div>
<header>
header.js
(function ($) {
$(document);
}(jQuery));
$(function () {
$('#header').load('/pages/header.html');
});
$(document).ready(function() {
$('.nav li').click(function () {
$('.nav li.active').removeClass('active');
$(this).addClass('active');
});
});
Aucun commentaire:
Enregistrer un commentaire