我正在尝试开发一个"仪表板"；样式网站，使用php、javascript、html和css。在我制作了侧边栏之后，我正试图更改"；页面"；，比如，用户在主页上，点击侧边栏的任何图标后，他都会更改该部分(例如，它被隐藏，现在显示(，而不更改页面。我正在使用我在另一个网站上使用的脚本，但我无法在这个项目中使用它，我不知道是因为我在使用php(在其他项目中，我没有(，还是我把代码搞砸了。如果有人能帮忙，我将不胜感激；(
!(function($) {
"use strict";
// Nav Menu
$(document).on('click', '.nav-menu a, .mobile-nav a', function(e) {
if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
var hash = this.hash;
var target = $(hash);
if (target.length) {
e.preventDefault();
if ($(this).parents('.nav-menu, .mobile-nav').length) {
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$(this).closest('li').addClass('active');
}
if (hash == '#home') {
$('#home').removeClass('home-top');
$("section").removeClass('section-show');
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return;
}
if (!$('#home').hasClass('home-top')) {
$('#home').addClass('home-top');
setTimeout(function() {
$("section").removeClass('section-show');
$(hash).addClass('section-show');
}, 350);
} else {
$("section").removeClass('section-show');
$(hash).addClass('section-show');
}
$('html, body').animate({
scrollTop: 0
}, 350);
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return false;
}
}
});
// Activate/show sections on load with hash links
if (window.location.hash) {
var initial_nav = window.location.hash;
if ($(initial_nav).length) {
$('#home').addClass('home-top');
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$('.nav-menu, .mobile-nav').find('a[href="' + initial_nav + '"]').parent('li').addClass('active');
setTimeout(function() {
$("section").removeClass('section-show');
$(initial_nav).addClass('section-show');
}, 350);
}
}
// Mobile Navigation
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>');
$('body').append('<div class="mobile-nav-overly"></div>');
$(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').toggle();
});
$(document).click(function(e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
}
});
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
})(jQuery);* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 14px;
line-height: 1.3;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
body {
background: #2d2d2d;
display: flex;
min-height: 100vh;
min-width: 100vw;
overflow: hidden;
color: white;
padding: 16px;
}
.sidebar{
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 78px;
background: #0f0f0f;
padding: 6px 14px;
z-index: 99;
transition: all 0.5s ease;
}
.sidebar.open{
width: 250px;
}
.sidebar .logo-details{
height: 60px;
display: flex;
align-items: center;
position: relative;
}
.sidebar .logo-details .icon{
opacity: 0;
transition: all 0.5s ease;
}
.sidebar .logo-details .logo_name{
color: #fff;
font-size: 20px;
font-weight: 600;
opacity: 0;
transition: all 0.5s ease;
}
.sidebar.open .logo-details .icon,
.sidebar.open .logo-details .logo_name{
opacity: 1;
padding-left: 20px;
}
.sidebar .logo-details #btn{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 22px;
transition: all 0.4s ease;
font-size: 23px;
text-align: center;
cursor: pointer;
transition: all 0.5s ease;
}
.sidebar.open .logo-details #btn{
text-align: right;
}
.sidebar i{
color: #fff;
height: 60px;
min-width: 50px;
font-size: 28px;
text-align: center;
line-height: 60px;
}
.sidebar .nav-list{
margin-top: 20px;
height: 100%;
}
.sidebar li{
position: relative;
margin: 8px 0;
list-style: none;
}
.sidebar li .tooltip{
position: absolute;
top: -20px;
left: calc(100% + 15px);
z-index: 3;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
font-weight: 400;
opacity: 0;
white-space: nowrap;
pointer-events: none;
transition: 0s;
}
.sidebar li:hover .tooltip{
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
top: 50%;
transform: translateY(-50%);
}
.sidebar.open li .tooltip{
display: none;
}
.sidebar input{
font-size: 15px;
color: #FFF;
font-weight: 400;
outline: none;
height: 50px;
width: 100%;
width: 50px;
border: none;
border-radius: 12px;
transition: all 0.5s ease;
background: #0f0f0f;
}
.sidebar.open input{
padding: 0 20px 0 50px;
width: 100%;
}
.sidebar .bx-search{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 22px;
background: #0f0f0f;
color: #FFF;
}
.sidebar.open .bx-search:hover{
background: #0f0f0f;
color: #FFF;
}
.sidebar .bx-search:hover{
background: #FFF;
color: #2d2d2d;
}
.sidebar li a{
display: flex;
height: 100%;
width: 100%;
border-radius: 12px;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
background: #0f0f0f;
}
.sidebar li a:hover{
background: #FFF;
}
.sidebar li a .links_name{
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: 0.4s;
}
.sidebar.open li a .links_name{
opacity: 1;
pointer-events: auto;
}
.sidebar li a:hover .links_name,
.sidebar li a:hover i{
transition: all 0.5s ease;
color: #11101D;
}
.sidebar li i{
height: 50px;
line-height: 50px;
font-size: 18px;
border-radius: 12px;
}
.sidebar li.profile{
position: fixed;
height: 60px;
width: 78px;
left: 0;
bottom: -8px;
padding: 10px 14px;
background: #0f0f0f;
transition: all 0.5s ease;
overflow: hidden;
}
.sidebar.open li.profile{
width: 250px;
}
.sidebar li .profile-details{
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sidebar li img{
height: 45px;
width: 45px;
object-fit: cover;
border-radius: 6px;
margin-right: 10px;
}
.sidebar li.profile .name,
.sidebar li.profile .job{
font-size: 15px;
font-weight: 400;
color: #fff;
white-space: nowrap;
}
.sidebar li.profile .job{
font-size: 12px;
}
.sidebar .profile #log_out{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background: #0f0f0f;
width: 100%;
height: 60px;
line-height: 60px;
border-radius: 0px;
transition: all 0.5s ease;
}
.sidebar.open .profile #log_out{
width: 50px;
background: none;
right: 40%;
}
.home-section{
position: relative;
background: #E4E9F7;
min-height: 100vh;
top: 0;
left: 78px;
width: calc(100% - 78px);
transition: all 0.5s ease;
z-index: 2;
}
.sidebar.open ~ .home-section{
left: 250px;
width: calc(100% - 250px);
}
.home-section .text{
display: inline-block;
color: #11101d;
font-size: 25px;
font-weight: 500;
margin: 18px
}
@media (max-width: 420px) {
.sidebar li .tooltip{
display: none;
}
}
.main {
background-color: #0f0f0f;
width: 100%;
padding: 50px;
margin-left: 110px;
margin-top: 60px;
margin-bottom: 60px;
margin-right: 60px;
border-radius: 50px;
display: flex;
}
section {
overflow: hidden;
position: absolute;
width: 100%;
top: 140px;
bottom: 100%;
opacity: 0;
transition: ease-in-out 0.4s;
z-index: 2;
}
section.section-show {
top: 100px;
bottom: auto;
opacity: 1;
padding-bottom: 45px;
}<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/painel.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
<title>Prosw Treinamentos</title>
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<div class="logo_name">Prosw Cursos</div>
<i class='bx bx-menu' id="btn" ></i>
</div>
<nav>
<ul class="nav-list">
<li>
<i class='bx bx-search' ></i>
<input type="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li class="active">
<a href="#home">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Videos</span>
</a>
<span class="tooltip">Videos</span>
</li>
<li>
<a href="#duvidas">
<i class='bx bx-chat' ></i>
<span class="links_name">Duvidas</span>
</a>
<span class="tooltip">Duvidas</span>
</li>
<li>
<a href="#tutorial">
<i class='bx bx-pie-chart-alt-2' ></i>
<span class="links_name">Tutorial de uso</span>
</a>
<span class="tooltip">Tutorial</span>
</li>
<li>
<a href="#settings">
<i class='bx bx-cog' ></i>
<span class="links_name">Configurações</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<i class='bx bx-log-out' id="log_out" ></i>
</li>
</ul>
</nav>
</div>
<div class="main">
<section id="home" class="home-top">
<div class="content">
<header>
<h1>Treinamentos</h1>
</header>
</div>
</section>
<section id="duvidas">
<div class="content">
<header>
<h1>Dúvidas</h1>
</header>
</div>
</section>
<section id="tutorial">
<div class="content">
<header>
<h1>Tutorial</h1>
</header>
</div>
</section>
<section id="settings">
<div class="content">
<header>
<h1>Configurações</h1>
</header>
</div>
</section>
</div>
<script>
let sidebar = document.querySelector(".sidebar");
let closeBtn = document.querySelector("#btn");
let searchBtn = document.querySelector(".bx-search");
closeBtn.addEventListener("click", ()=>{
sidebar.classList.toggle("open");
menuBtnChange();//calling the function(optional)
});
searchBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
sidebar.classList.toggle("open");
menuBtnChange(); //calling the function(optional)
});
// following are the code to change sidebar button(optional)
function menuBtnChange() {
if(sidebar.classList.contains("open")){
closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");//replacing the iocns class
}else {
closeBtn.classList.replace("bx-menu-alt-right","bx-menu");//replacing the iocns class
}
}
</script>
<script src="js/main.js"></script>
</body>
</html>您尚未添加jquery库添加这个
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>