While viewing the Job screen in the following image, I attempted to click on "Personal," but it remained stuck on the Job screen.
While viewing the Job screen in the following image, I attempted to click on "Personal," but it remained stuck on the Job screen.
Your HTML code does not adhere to the correct structure for an HTML file, as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- YOUR CONTENT HERE -->
</body>
</html>
Using Bootstrap 5, your code will function correctly if you include the following:
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="false">Job</button>
</li>
</ul>
<div class="tab-pane fade" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
<h2>Personal Information</h2>
<div class="row my-2 g-4">
<div class="col-12 col-md-5">
<label for="firstName" class="form-label">First Name</label>
<input type="text" id="firstName" name="firstname" value="<%=firstname%>" class="form-control" aria-label="First Name" required>
</div>
<div class="col-12 col-md-5">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" id="lastName" name="lastName" value="<%=lastName%>" class="form-control" aria-label="Last Name" required>
</div>
</div>
</div>
To ensure a specific tab is displayed on load, add the active show classes to the tab-pane fade element.
<div class="tab-pane fade active show" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
To further enhance it, apply the active class to the corresponding nav-link element for your tab-pane.
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>
EDIT: It is crucial to follow the bootstrap structure for proper functionality.
Your .tap-pane MUST be children of .tab-content, so the structure should look like this:
.tab-content > .tab-pane > form
OR
.tab-content > form.tab-pane
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="67050808131413150617275249564954">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf9f4f4efe8efe9faebdbaeb5aab5a8">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>
</li>
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="false">Job</button>
</li>
</ul>
<!-- tab-content PARENT OF .tab-pane -->
<div class="tab-content">
<!-- tab-pane CHILDREN OF .tab-content -->
<div class="tab-pane fade" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
<h2>Personal Information</h2>
<!-- form CHILDREN of .tab-pane -->
<form>Your form here</form>
</div>
<div class="tab-pane fade active show" id="jobPanel" role="tabpanel" aria-labelledby="job-tab">
<h2>Job</h2>
<form>Your form here</form>
</div>
</div>I am currently working on implementing web push notifications using Firebase. Unfortunately, when attempting to access messaging.getToken(), I encounter an error stating "messaging is undefined." Below is the code snippet I am utilizing: private messaging ...
I have a series of TypeScript objects structured like this: interface MyObject { id: string, position: number } My goal is to transform this array into a map format where it shows the relationship between id and position, as needed for a future JSON ...
I am working on a page that showcases a tree list using unordered lists. Each li element with children triggers an ajax call to fetch those children and display them as another ul/li combination, which is functioning correctly. However, the problem arise ...
After spending a week working on Next.js, I decided to test it outside of the development setup. Despite encountering some bugs, I was able to build and start it without any errors. However, when I tried to access http://localhost:3000, I received the foll ...
After implementing the script below, I successfully managed to shift my image to the right upon clicking: <script> var myTimer = null; function move(){ document.getElementById("fish").style.left = parseInt(document.getElementById("fish ...
I am new to AngularJS and I am looking for help on retrieving information about the logged-in user. I want to be able to display this information but I'm not sure where to start. Here is my main Angular controller: var myApp = angular.module('my ...
Currently, I am working on an Angular project and my requirement is to hide the header block specifically on the login page. Despite attempting to hide the header on the login page, it seems that my efforts have been unsuccessful so far. Is there anyone wh ...
Whenever I try to save data using a bot command, a new object is created every time the data is submitted. I want to ensure that only one object is created, but every time the same user submits data, it should automatically update rather than create a new ...
I'm facing an issue with displaying an icon marker image in my Vue2-Leaflet and Quasar project. Instead of the desired image, I am seeing a broken image icon and encountering a 404 error in the console. Despite researching various solutions, I was abl ...
Would it be feasible to modify this code to function recursively if the redirects to the js file that needs to be executed? function loadScript(scriptUrl) { var xhr = new XMLHttpRequest(); xhr.open("GET", scriptUrl); xhr.onready ...
I have a piece of client-side JavaScript that creates a jpeg file through HTML5 canvas manipulation when the user clicks an "OK" button. My goal is to automatically insert this jpeg output into the "Upload Front Side" field in a form, simulating a user up ...
I'm facing an issue with my code where I am not able to retrieve user data from req.body as it returns undefined. However, I can successfully access the required information from req.params. Can anyone provide guidance on how to resolve this issue? co ...
How can I locate and delete a specific value with the ID "5cc6d9737760963ea07de411"? Data: [ { "products" : [ { "id" : "5cc6d9737760963ea07de411", "quantity" : 1, "totalPrice" : 100, ...
Imagine having two arrays with a similar structure like this: const individuals = [{name: "Jane Doe", id: "0001"},{name: "John Doe", id:"0002"}, {name: "Sam Smith", id: "0003"}, {name: "Joe ...
I have created an image preview div to show the selected image's thumbnail. Everything was working fine so far. But now, I want this div to be hidden when the page initially loads and only become visible when a user selects an image to upload. Here is ...
My code was working perfectly until I decided to add some CSS to it. You can view the code snippet by clicking on this link (I couldn't include it here due to issues with the code editor): View Gist code snippet here The code is based on Bootstrap. ...
After successfully retrieving my API data, I am now tasked with updating it. Within my component, I have the ability to log the data using the following code snippet. In my application, there is an input field where I can enter a new name for my product an ...
I'm in the process of utilizing the Dojo builder to compile a unified file that encompasses all the necessary modules for my application, excluding the application itself. Below is an illustration of a layer definition: layers: { 'dojo/dojo ...
My Current Portfolio Gallery Setup: Currently, my portfolio gallery is displayed in a masonry grid format using the JIG plugin. This grid showcases images from my custom post_type. When clicking on a thumbnail, a lightbox pops up showing the full photo. T ...
Forms typically use an action attribute to specify where the data should be posted, such as a .php file. Do <input> elements have this action attribute as well? The answer is likely no, but I am curious to understand what concept I may be misunders ...