I make home page, and I use bootstrap tabs. My problem is that when I click the next tab, eg. Login, the background does not change. My goal is that when I click on a different tab, a different background will appear on the entire page. The second problem is that when they are in the second Login tab, when I click login, it automatically takes me to the first tab. I don't know how to make me stay on the same tab.
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-xl-12 row justify-content-center">
<ul class="nav nav-tabs col-xl-12 bg-dark" id="wersalTabs">
<li class="nav-item col-xl-4">
<a class="nav-link border-0" href="#historia" data-toggle="tab">Startowa</a>
<li class="nav-item col-xl-4">
<a class="nav-link border-0" href="#logowanie" data-toggle="tab">Logowanie</a>
</li>
<li class="nav-item col-xl-4">
<a class="nav-link border-0" href="#register" data-toggle="tab">Rejestracja</a>
</li>
</ul>
<div class="tab-content" id="wersalContent">
<div class="tab-pane fade show active" id="historia">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dignissim nunc imperdiet luctus
iaculis. Pellentesque tortor neque, vehicula quis lorem vel, commodo cursus ex. Maecenas gravida
tempor ex, sed porta leo faucibus eget. Integer finibus neque in felis viverra, a tincidunt nibh
malesuada. Vestibulum viverra massa vestibulum diam ultrices lacinia. Curabitur magna lectus,
condimentum quis odio vitae, maximus placerat erat. Phasellus sit amet magna est. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Sed egestas egestas cursus. Donec porta lectus
eu vulputate laoreet. </p>
<h2>Donec sit amet tempus dolor</h2>
<p>Mauris interdum interdum mauris, eu faucibus ligula pharetra et. Nam eget velit eu elit lobortis
placerat non et arcu. Etiam ultrices vel nisl sit amet gravida. Quisque lacus nisl, venenatis
quis ex vitae, lobortis porttitor libero. Donec tincidunt sem a vehicula elementum. Donec felis
enim, tincidunt et porttitor ac, vehicula sed nisl. Nam tincidunt ornare est quis semper. Sed
nec sapien nulla. Quisque maximus aliquet consectetur. </p>
</div>
<div class="tab-pane fade" id="galeria">
<div>
<div class="row mt-3">
<div>
<figure>
<img src="img/wersal01.jpg" class="img-fluid" alt="Wersal">
<figcaption>Fragment ogrodu Pa?acu Wersalskiego</figcaption>
</figure>
</div>
</div>
<div class="row">
<div>
<figure>
<img src="img/wersal02.jpg" class="img-fluid" alt="Wersal">
<figcaption>Pa?ac Wersalski</figcaption>
</figure>
</div>
</div>
<div class="row">
<div>
<figure>
<img src="img/wersal03.jpg" class="img-fluid" alt="Wersal">
<figcaption>Pa?ac Wersalski</figcaption>
</figure>
</div>
</div>
<div class="row">
<div>
<figure>
<img src="img/wersal04.jpg" class="img-fluid" alt="Wersal">
<figcaption>Fragment ogrodu Pa?acu Wersalskiego</figcaption>
</figure>
</div>
</div>
<div class="row">
<div>
<figure>
<img src="img/wersal05.jpg" class="img-fluid" alt="Wersal">
<figcaption>Galeria Zwierciadlana w Pa?acu Wersalskim</figcaption>
</figure>
</div>
</div>
</div>
</div>
<!-- <div class="container col-10 col-sm-8 col-md-6 col-lg-4 col-xl-3" id="register"> -->
<div class="tab-pane fade" id="logowanie">
<h1>Logowanie</h1>
<form action="index.php" method="post">
<div class="row">
<div class="form-group col-xl-12 text-light">
<label>Login</label>
<input type="text" name="log" class="form-control" placeholder="Login...">
<div class="error">
<?php echo $abc ?? '' ?>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xl-12 text-light">
<label>Has?o</label>
<input type="text" name="pass" class="form-control" placeholder="Has?o...">
<div class="error">
<?php echo $abc2 ?? '' ?>
</div>
</div>
</div>
<div class="row d-flex justify-content-center">
<button type="submit" class="btn btn-danger" name="signIn">Logowanie</button>
</div>
</form>
</div>
<!-- <div class="container col-10 col-sm-8 col-md-6 col-lg-4 col-xl-3" id="register"> -->
<div class="tab-pane fade col-xl-3" id="register">
<h1>Rejestracja</h1>
<form action="index.php" method="post">
<div class="row">
<div class="form-group col-xl-12 text-light">
<label>Login</label>
<input type="text" name="login" class="form-control" placeholder="Login...">
<div class="error">
<?php echo $errors ?? '' ?>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xl-12 text-light">
<label>Has?o</label>
<input type="password" name="password" class="form-control" placeholder="Has?o...">
<div class="error">
<?php echo $errors2 ?? '' ?>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xl-12 text-light">
<label>Has?o</label>
<input type="password" name="password_repeat" class="form-control" placeholder="Has?o...">
<div class="error">
<?php echo $errors3 ?? '' ?>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xl-12 text-light">
<label>Imi?</label>
<input type="text" name="first_name" class="form-control" placeholder="Imi?...">
<span class="error">
<?php echo $error4 ?? '' ?>
</span>
</div>
</div>
<div class="row">
<div class="form-group col-xl-12 text-light">
<label>Nazwisko</label>
<input type="text" name="last_name" class="form-control" placeholder="Nazwisko...">
<div class="error">
<?php ?>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xl-12 text-light">
<label>Email</label>
<input type="text" name="email" class="form-control" placeholder="Email...">
<div class="error">
<?php echo $errors6 ?? '' ?>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xl-12 text-light">
<label>Telefon</label>
<input type="text" name="number_phone" class="form-control" placeholder="Telefon...">
<div class="error">
<?php echo $errors7 ?? '' ?>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xl-12 text-light">
<label>Data Urodzenia</label>
<input type="date" name="birth_date" class="form-control">
<div class="error">
<?php echo $errors8 ?? '' ?>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xl-12 text-light">
<select class="browser-default custom-select" name="gender">
<option value="">Wybierz p?e?</option>
<option value="M??czyzna">M??czyzna</option>
<option value="Kobieta">Kobieta</option>
</select>
<div class="error">
<?php echo $errors9 ?? '' ?>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xl-12 text-light">
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLang" lang="pl-Pl" name="avatar">
<label class="custom-file-label" for="customFileLang">Wybierz pliki</label>
<div class="error">
<?php echo $errors10 ?? '' ?>
</div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center">
<button type="submit" class="btn btn-danger" name="submit">
