Creating programmatic tabs navigation
Currently, the user can use the tabs navigation on the Cart page to navigate between the three tabs. We want to disable the buttons used for tabs navigation and instead make use of programmatic tabs navigation. This means that the active tab pane will change automatically when the user goes through the checkout flow by using the submit button in each form, labeled Next, Next, and Pay, respectively.
First, we need to update our markup to disable the buttons used for tabs navigation. For each button, we will add the .disabled
class to get the correct styling and remove the data-bs-toggle=”tab”
attribute to disable the functionality to change the tab on click. The updated markup looks like this:
part-2/chapter-9/website/cart.html
<ul class="nav nav-pills nav-justified mb-5" role="tablist"> <li class="nav-item" role="presentation"> <button...