Я собираюсь разработать админ-панель для своего приложения. Я разделил свой дом на контейнеры.Я хочу показать детали по нажатым элементам в Images.html и Categories.html.когда я нажимаю на пункт меню во 2-м контейнере (также называемом боковой панелью). Я хочу показать подробные изображения и категории, но моя функция switchView не работает, я не знаю, почему я не могу показать содержимое images.htmlи Categories.html с использованием представлений, но я не могу получить доступ к данным моей следующей html-страницы.Вот мой код admin.html (домашняя страница):
<!DOCTYPE html>
<html class="h-100">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="stylesheet.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.2/firebase-app.js"></script>
</head>
<body class="h-100">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Wallpaper App Admin
</a>
<div class="dropdown navbar-right">
<button
id="user-email"
class="btn btn-secondary dropdown-toggle"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
probelalkhan@gmail.com
</button>
<div
class="dropdown-menu"
aria-labeledby="user-email"
>
<a class="dropdown-item" id="btn-logout" href="#">
Logout
</a>
</div>
</div>
</div>
</nav>
<div class="row h-100 bg-light">
<div class="col-lg-2 bg-secondary">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#" onclick="switchView('images.html')">
<span class="text-dark">Images</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="switchView('categories.html')">
<span class="text-dark">Categories</span>
</a>
</li>
</ul>
</div>
<div class="col-lg-10">
<div class="container" id="container">
<h1>Images</h1>
</div>
</div>
</div>
<script src="app.js"></script>
<script>
firebase.auth().onAuthStateChanged(function(user){
if(!user){
window.location.href = "index.html";
}
});
</script>
</body>
</html>
Вот мой app.js:
var firebaseConfig = {
apiKey: "AIzaSyA0nFgIbrXfWULyd9QJPZd60qfRhfAzC0Y",
authDomain: "mywallpaperapp-8ed57.firebaseapp.com",
databaseURL: "https://mywallpaperapp-8ed57.firebaseio.com",
projectId: "mywallpaperapp-8ed57",
storageBucket: "mywallpaperapp-8ed57.appspot.com",
messagingSenderId: "900270634824",
appId: "1:900270634824:web:4dfbcc86520c6f637ba57d"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.auth.Auth.Persistence.LOCAL;
$("#btn-login").click(function(){
var email = $("#email").val();
var password = $("#password").val();
var result = firebase.auth().signInWithEmailAndPassword(email, password);
result.catch(function(error){
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode);
console.log(errorMessage);
});
});
$("#btn-logout").click(function(){
firebase.auth().signOut();
});
function switchView(view){
$.get({
url:view,
cache: false,
}).then(function(data){
$("#container").html(data);
});
}
Проблема в этом блоке кода из-за того, что моя функция switchView неработая над доступом к images.html и Categories.html, хотя я и написал это прекрасно:
<div class="col-lg-2 bg-secondary">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#" onclick="switchView('images.html')">
<span class="text-dark">Images</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="switchView('categories.html')">
<span class="text-dark">Categories</span>
</a>
</li>
</ul>
</div>
Пожалуйста, искреннее внимание здесь.Я буду вам очень благодарен.