HTML navigation list shows multiple items as selected - html

Question

I am working on a website, the navigation list of the website is in the picture. If I go to the page number 1, other pages are also shown as selected. But if I go to the page number 2 there is no problem.
Here is the code for navigation list. The list items shown as selected have different file names. How a list item now that it is selected ?
<nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="../index.php">
<i class="ti-dashboard menu-icon"></i>
<span class="menu-title">Ana Sayfa</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#kullanicilar" aria-expanded="false"
aria-controls="kullanicilar">
<i class="ti-id-badge menu-icon"></i>
<span class="menu-title">Kullanıcılar</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="kullanicilar">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="kullanicilari-listele.php">Kullanıcılar</a></li>
<li class="nav-item"><a class="nav-link" href="kullanici-olustur.php">Kullanıcı
Oluştur</a></li>
<li class="nav-item"><a class="nav-link" href="kullanici-istatistikleri-listele.php">Kullanıcı
İstatistikleri</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#workouts" aria-expanded="false"
aria-controls="workouts">
<i class="ti-gallery menu-icon"></i>
<span class="menu-title">Antrenmanlar</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="workouts">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="antrenmanlari-listele.php">Antrenmanlar</a></li>
<li class="nav-item"><a class="nav-link" href="antrenman-olustur.php">Antrenman Oluştur</a></li>
<li class="nav-item"><a class="nav-link" href="egzersizleri-listele.php">Tekil Egzersizler</a></li>
<li class="nav-item"><a class="nav-link" href="tekil-egzersiz-olustur.php">Tekil</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#pilates" aria-expanded="false"
aria-controls="pilates">
<i class="ti-timer menu-icon"></i>
<span class="menu-title">Pilates</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="pilates">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="pilates-egzersiz-setleri.php">Egzersiz Setleri</a></li>
<li class="nav-item"><a class="nav-link" href="pilates-egzersiz-seti-olustur.php">Egzersiz Seti Oluştur</a></li>
<li class="nav-item"><a class="nav-link" href="pilates-tekil-egzersizleri.php">Tekil Egzersizler</a></li>
<li class="nav-item"><a class="nav-link" href="pilates-tekil-egzersiz-olustur.php">Tekil</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#yoga" aria-expanded="false"
aria-controls="yoga">
<i class="ti-eye menu-icon"></i>
<span class="menu-title">Yoga</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="yoga">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="yoga-egzersiz-setleri.php">Egzersiz Setleri</a></li>
<li class="nav-item"><a class="nav-link" href="yoga-egzersiz-seti-olustur.php">Egzersiz Seti Oluştur</a></li>
<li class="nav-item"><a class="nav-link" href="yoga-tekil-egzersizleri.php">Tekil Egzersizler</a></li>
<li class="nav-item"><a class="nav-link" href="yoga-tekil-egzersiz-olustur.php">Tekil Egzersiz Oluştur</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#streching" aria-expanded="false"
aria-controls="streching">
<i class="ti-hand-open menu-icon"></i>
<span class="menu-title">Streching</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="streching">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="streching-egzersiz-setleri.php">Egzersiz Setleri</a></li>
<li class="nav-item"><a class="nav-link" href="streching-egzersiz-seti-olustur.php">Yeni Egzersiz Seti</a></li>
<li class="nav-item"><a class="nav-link" href="kstreching-tekil-egzersizleri.php">Tekil Egzersizler</a></li>
<li class="nav-item"><a class="nav-link" href="streching-tekil-egzersiz-olustur.php">Yeni Egzersiz</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#sporKategorileri" aria-expanded="false"
aria-controls="sporKategorileri">
<i class="ti-star menu-icon"></i>
<span class="menu-title">Kategoriler</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="sporKategorileri">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="kategorileri-listele.php">Kategoriler</a></li>
<li class="nav-item"><a class="nav-link" href="kategori-olustur.php">Yeni Kategori Oluştur</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#egzersizEkipmanlari" aria-expanded="false"
aria-controls="egzersizEkipmanlari">
<i class="ti-basketball menu-icon"></i>
<span class="menu-title">Egzersiz</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="egzersizEkipmanlari">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link"
href="egzersiz-ekipmanlari-listele.php">Ekipmanlar</a></li>
<li class="nav-item"><a class="nav-link" href="egzersiz-ekipmani-olustur.php">Yeni Ekipman
Oluştur</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#vucutBolgeleri" aria-expanded="false"
aria-controls="vucutBolgeleri">
<i class="ti-heart menu-icon"></i>
<span class="menu-title">Vücut Bölgeleri</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="vucutBolgeleri">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link"
href="vucut-bolgeleri-listele.php">Vücut Bölgeleri</a></li>
<li class="nav-item"><a class="nav-link" href="vucut-bolgesi-olustur.php">Vücut Bölgesi
Oluştur</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#urunler" aria-expanded="false"
aria-controls="urunler">
<i class="ti-package menu-icon"></i>
<span class="menu-title">Ürünler</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="urunler">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="urunleri-listele.php">Ürünler</a></li>
<li class="nav-item"><a class="nav-link" href="urun-olustur.php">Yeni Ürün Oluştur</a>
</li>
<li class="nav-item"><a class="nav-link" href="urun-istatistikleri-listele.php">Ürün
İstatistikleri</a></li>
</ul>
</div>
</li>
</ul>
</nav>
'''
This is the page number 1
<?php
ob_start();
session_start();
if (!isset($_SESSION["login"])) {
header("Location: ../login.php");
} else {
include "veritabani/baglanti.php";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Online Gym Fitness Mobil Uygulama Yönetim Paneli</title>
<!-- plugins:css -->
<link rel="stylesheet" href="../vendors/ti-icons/css/themify-icons.css">
<link rel="stylesheet" href="../vendors/base/vendor.bundle.base.css">
<!-- endinject -->
<!-- inject:css -->
<link rel="stylesheet" href="../css/style.css">
<!-- endinject -->
<link rel="shortcut icon" href="../images/favicon.png"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="../js/repeater.js" type="text/javascript"></script>
</head>
<body>
<div class="container-scroller">
<!-- partial:../../partials/_navbar.html -->
<nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
<div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-center">
<a class="navbar-brand brand-logo mr-xl-5" href="../index.php"><img src="../images/logo.png" class="mr-2"
alt="logo"/></a>
<a class="navbar-brand brand-logo-mini" href="../index.php"><img src="../images/logo-mini.png" alt="logo"/></a>
</div>
<div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">
<button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
<span class="ti-view-list"></span>
</button>
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item nav-profile dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="profileDropdown">
<img src="../images/faces/user.png" alt="profile"/>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="profileDropdown">
<a class="dropdown-item" href="veritabani/logout.php">
<i class="ti-power-off text-primary"></i>
Logout
</a>
</div>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button"
data-toggle="offcanvas">
<span class="ti-view-list"></span>
</button>
</div>
</nav>
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<!-- partial:../partials/_sidebar.html -->
<?php
include "navbar.html";
?>
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<div class="col-lg-9 grid-margin">
<div class="card">
<div class="card-body">
<h4 class="card-title">Yeni Tekil Egzersiz</h4>
<p class="card-description">
Yeni Tekil Egzersiz Oluşturma Formu
</p>
<form method="post" name="egzersizOlusturmaFormu" id="egzersizOlusturmaFormu"
class="forms-sample">
<div class="form-group">
<label for="egzersizBasligi">Egzersiz Başlığı</label>
<input type="text" class="form-control" id="egzersizBasligi"
name="egzersizBasligi"
required="required"
>
</div>
<div class="form-group">
<label for="egzersizAltBaslik">Egzersiz Alt Başlık</label>
<input type="text" class="form-control" id="egzersizAltBaslik"
name="egzersizAltBaslik"
required="required"
>
</div>
<div class="form-group">
<label for="egzersizAciklama">Egzersiz Açıklama</label>
<input type="text" class="form-control" name="egzersizAciklama"
id="egzersizAciklama"
required="required">
</div>
<div class="form-group">
<label for="egzersizPremium">Premium içerik mi ?</label>
<select class="form-control form-control"
name="egzersizPremium" id="egzersizPremium">
<option value="1">Evet</option>
<option value="0">Hayır</option>
</select>
</div>
<div class="form-group">
<label for="egzersizVideoUrl">Video Embed Url</label>
<input type="text" class="form-control"
name="egzersizVideoUrl" id="egzersizVideoUrl"
required="required">
</div>
<div class="form-group">
<label for="egzersizPopularite">Popülarite Skoru</label>
<input type="text" class="form-control"
name="egzersizPopularite" id="egzersizPopularite">
</div>
<div class="form-group">
<label for="egzersizEkipmanKategorisi">Ekipman Kategorisi</label>
<select class="form-control form-control" name="egzersizEkipmanKategorisi"
id="egzersizEkipmanKategorisi">
<?php
$sorgu = "SELECT name,id FROM equipments ORDER BY name DESC";
$sorguSonucu = mysqli_query($baglanti, $sorgu) or trigger_error("Hata: " . mysqli_error(), E_USER_ERROR);
if ($sorguSonucu) {
while ($equipment = mysqli_fetch_assoc($sorguSonucu)) {
echo "<option value='" . $equipment['id'] . "'>" . $equipment["name"] . "</option>";
}
}
?>
</select>
</div>
<div class="form-group">
<label for="egzersizSporKategorisi">Kategori</label>
<select class="form-control form-control" name="egzersizSporKategorisi"
id="egzersizSporKategorisi">
<?php
$sorgu = "SELECT name,id FROM categories ORDER BY name DESC";
$sorguSonucu = mysqli_query($baglanti, $sorgu) or trigger_error("Hata: " . mysqli_error(), E_USER_ERROR);
if ($sorguSonucu) {
while ($sport = mysqli_fetch_assoc($sorguSonucu)) {
echo "<option value='" . $sport['id'] . "'>" . $sport['name'] . "</option>";
}
}
?>
</select>
</div>
<div class="form-group">
<label for="egzersizVucutBolgesi">Vücut Bölgesi</label>
<select class="form-control form-control" name="egzersizVucutBolgesi"
id="egzersizVucutBolgesi">
<?php
$bodyPartsSql = "SELECT name,id FROM body_parts ORDER BY name DESC";
$bodyParts = mysqli_query($baglanti, $bodyPartsSql) or trigger_error("Hata: " . mysqli_error(), E_USER_ERROR);
if ($bodyParts) {
while ($part = mysqli_fetch_assoc($bodyParts)) {
echo "<option value='" . $part['id'] . "'>" . $part['name'] . "</option>";
}
}
?>
</select>
</div>
<div class="form-group">
<label for="egzersizZorlukDerecesi">Egzersiz Zorluk Derecesi</label>
<select class="form-control form-control"
name="egzersizZorlukDerecesi" id="egzersizZorlukDerecesi">
<option value="1">Çok Kolay</option>
<option value="2">Kolay</option>
<option value="3">Orta</option>
<option value="4">Zor</option>
<option value="5">Çok Zor</option>
</select>
</div>
<div class="form-group">
<label for="egzersizOrtalamaSure">Egzersiz Ortalama Süresi (Dakika)</label>
<input type="text" class="form-control form-control"
name="egzersizOrtalamaSure" id="egzersizOrtalamaSure"
required="required">
</div>
<div class="form-group">
<label for="egzersizSetTipi">Setler Tekrarlı mı Süreli mi ?</label>
<select class="form-control form-control"
name="egzersizSetTipi" id="egzersizSetTipi">
<option value="1">Tekrarlı</option>
<option value="2">Süreli</option>
</select>
</div>
<div id="repeater">
<div class="repeater-heading" align="right">
<button type="button" class="btn btn-primary repeater-add-btn">Set Ekle
</button>
</div>
<div class="items" data-group="exercise_sets">
<div class="item-content">
<div class="row">
<div class="form-group" style="margin-left: 15px">
<label>Tekrar Sayısı/Süresi (Saniye) </label>
<input type="text" class="form-control"
required="required"
data-skip-name="true"
data-name="tekrarSayilari[]"
>
</div>
<div class="form-group" style="margin-left: 20px">
<label>Dinlenme Süresi (Saniye)</label>
<input type="text" class="form-control"
required="required"
data-skip-name="true"
data-name="dinlenmeSureleri[]"
>
</div>
<div class="col-lg-2" style="margin-top:30px;" align="center">
<button id="remove-btn"
onclick="$(this).parents('.items').remove()"
class="btn btn-danger">Sil
</button>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label>Tanıtım Görseli Yükle</label>
<input type="file" name="egzersizTanitimGorseli"
id="egzersizTanitimGorseli"
class="file-upload-default">
<div class="input-group col-xs-12">
<input type="text" class="form-control file-upload-info"
required="required"
disabled="">
<span class="input-group-append">
<button class="file-upload-browse btn btn-primary" type="button">Görsel Seç</button>
</span>
</div>
<img id="gorsel_preview">
</div>
<div style="margin-top: 20px">
<button type="submit" class="btn btn-primary mr-2">ONAYLA</button>
<button type="reset" class="btn btn-light">İPTAL</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
<!-- container-scroller -->
<!-- plugins:js -->
<script src="../vendors/base/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- inject:js -->
<script src="../js/off-canvas.js"></script>
<script src="../js/hoverable-collapse.js"></script>
<script src="../js/template.js"></script>
<script src="../js/todolist.js"></script>
<script src="../js/file-upload.js"></script>
<script src="../js/repeater.js"></script>
<script src="../js/jquery.validate.js"></script>
<script type="text/javascript">
$('#egzersizOlusturmaFormu').on('submit', function (e) {
e.preventDefault();
$.ajax({
url: 'veritabani/egzersiz-kayit.php', // Verileri Post Ettiğimiz dosya adı
type: 'POST', // Form Metodumuz
data: new FormData(this), // Form ile gelen verilerimiz
contentType: false,
processData: false,
beforeSend: function () {
// Form Post edildikten sonra yapılacak işlem
// $('#result').html('<div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%;"><span class="sr-only">Lütfen Bekleyiniz....</span></div></div>');
},
success: function (data) {
// veritabani/etkinlik-ekle.php dosyamıza verilerin gönderildikten sonra işlem başarılı ise upload.php ile gelen sonuç değerini yazdıracağımız satır
alert(data);
$('#egzersizOlusturmaFormu')[0].reset(); // İşlem başarılı olduktan sonra formu sıfırlar
}
});
});
</script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#gorsel_preview').attr('src', e.target.result).attr('style', 'margin-bottom: 25px; margin-top: 25px; height: 150px; width: 150px');
};
reader.readAsDataURL(input.files[0]);
}
}
$("#egzersizTanitimGorseli").change(function () {
readURL(this);
});
</script>
<script>
$(document).ready(function () {
$('#repeater').createRepeater();
});
</script>
<!-- endinject -->
</body>
</html>