I find myself using a little boostrap 5 to learn more about the frontend but I have a problem when using a nav-tab that I customized myself
body {
display: flex !important;
justify-content: center !important;
align-items: center !important;
background-color: #1ed671f6;
}
.container__first{
max-width: 200em;
margin: 2% 25%;
background-color: #fff;
padding: 1em;
}
.menu-active {
border-bottom: 4px solid #1ed671f6;
}
<!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">
<title>Login</title>
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container container__first rounded">
<nav>
<div class="d-flex w-100 justify-content-around mb-4 nav" role="tablist">
<div class="nav-item" role="presentation">
<a href="#registro" id="nav-registro-tab" class="h4 fw-bold text-decoration-none text-dark" data-bs-toggle="tab" data-bs-target="#registro" role="tab" aria-controls="registro" aria-selected="true">Registro</a>
</div>
<div class="nav-item" role="presentation">
<a href="#login" id="nav-login-tab" class="h4 fw-bold text-decoration-none text-dark" data-bs-toggle="tab" data-bs-target="#login" role="tab" aria-controls="login" aria-selected="false">Login</a>
</div>
</div>
</nav>
<div class="tab-content">
<form id="registro" class="justify-content tab-pane fade show active" role="tabpanel" aria-labelledby="Registro">
<div class="ml-3 mr-3 col-auto">
<label for="" class="form-label fw-bold text-decoration-none text-dark"> Email</label>
<input type="text" name="" id="" class="form-control" require>
</div>
<div class="ml-3 mr-3 col-auto">
<label for="" class="form-label fw-bold text-decoration-none text-dark">Contraseña</label>
<input type="password" name="" id="" class="form-control" require>
<button type="submit" class="btn btn-lg btn-outline-success">Registrar</button>
</div>
</form>
<form id="login" class="justify-content tab-pane fade" role="tabpanel" aria-labelledby="Login">
<div class="ml-3 mr-3 col-auto">
<label for="" class="form-label fw-bold text-decoration-none text-dark">Usuario / Email</label>
<input type="text" name="" id="" class="form-control" require>
</div>
<div class="ml-3 mr-3 col-auto">
<label for="" class="form-label fw-bold text-decoration-none text-dark">Contraseña</label>
<input type="password" name="" id="" class="form-control" require>
</div>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="js.js"></script>
</body>
</html>
My problem is when clicking on the elements the boostrap js takes the first 2 times both elements and when I want to click a third time it doesn't work and in the console it starts sending the message "Empty string passed to getElementById() ." each time elements are clicked.
For the tab system you 're using, Bootstrap requires both the tablist and the tab-item to be an
<ul>
and<li>
respectively. By having them as<div>
you caused the strange behavior you show us.The empty string that you tell us is a problem that does not seem to be related to the error in the tabs.