The top scrolling behavior on click applies exclusively to the first set of Bootstrap 5 tabs

I am experiencing an issue with my HTML webpage that contains multiple BS5 Nav Tabs. The first tab is not functioning properly, while all the other tabs are working smoothly. When I click on the first BS5 Nav Tab, the page scrolls to the top with the address changing from "...../index.html" to "...../index.html#".

This problem persists in all other HTML pages that have BS5 Tabs. Only the first tab is not working as expected and is causing the page to scroll to the top. I am using Bootstrap 5 and Swiper JS.

I have attempted to resolve the issue by replacing "href" with "data-target" in the nav-items, but the problem still remains.

Below is the code snippet:

        <div class="container">
            <div class="m-4">
                <h5>Heading</h5>
                <ul class="nav nav-tabs" id="myTab1">
                    <li class="nav-item">
                        <a data-target="#tab11" class="nav-link active text-decoration-none text-dark" data-bs-toggle="tab">Tab1</a>
                    </li>
                    <li class="nav-item">
                        <a data-target="#tab12" class="nav-link text-decoration-none text-dark" data-bs-toggle="tab">Tab2</a>
                    </li>
                    <li class="nav-item">
                        <a data-target="#tab13" class="nav-link text-decoration-none text-dark" data-bs-toggle="tab">Tab3</a>
                    </li>
                    <li class="nav-item">
                        <a data-target="#tab14" class="nav-link text-decoration-none text-dark" data-bs-toggle="tab">Tab4</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="tab11">
                        some Bootstrap Card with Swiper JS
                    </div>
                    <div class="tab-pane fade " id="tab12">
                        some Bootstrap Card with Swiper JS
                    </div>
                    <div class="tab-pane fade" id="tab13">
                        some Bootstrap Card with Swiper JS
                    </div>
                    <div class="tab-pane fade" id="tab14">
                        some Bootstrap Card with Swiper JS
                    </div>
                </div>
            </div>
        </div>
javascripthtmlcssbootstrap-5swiper.js

Answer №1

In order to make the necessary adjustments, remember to switch the data-target attribute to href within the nav-link elements.

I confirmed the success of this modification by testing it on a code testing site.

Answer №2

I struggled to find a proper solution for this issue, but I came up with a simple workaround. By triggering a click on the second tab using JavaScript upon page load, followed by a click on the first tab to set it as active, the problem is effectively resolved. While it may not be the most ideal approach, it gets the job done.

   $(document).ready(function () {
        var element = document.querySelector('.nav-item:nth-child(2) a');
        var event = new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window
        });
        element.dispatchEvent(event);

        var element = document.querySelector('.nav-item:nth-child(1) a');
        var event = new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window
        });
        element.dispatchEvent(event);
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining Bootstrap Vue: utilizing class names alongside HTML tags

(Bootstrap-Vue 2.0, Vue.js 2.5) Is it possible to combine traditional CSS Bootstrap 4 classes with Bootstrap-Vue? For example, can I use the following code snippet: <section id="introduction"> <b-container class="h-100"> & ...

cssvue.jsbootstrap-4bootstrap-vue

Tips on displaying a single column in Bootstrap when only one item is present and switching to two columns when two items are present

Currently, I am utilizing the row class in Bootstrap which contains two columns, one for X and one for Y. There are scenarios where either the X column, the Y column, or both may be present within the row. Since a row can have up to 12 columns, when only t ...

htmlcssbootstrap-4

Unable to access the response body of a POST request from an external API within Firebase Cloud Functions

I am encountering an issue with my cloud function in which it makes an http POST request to the LinkedIn API for retrieving an access token. The main problem is that I am unable to retrieve the `body` of the response as it always turns out to be `undefined ...

javascriptnode.jsfirebasegoogle-cloud-functionslinkedin-api

Step-by-step guide on positioning an image to show at the bottom of a div

I am trying to create a div that covers 100% of the screen height, with a table at the top and white space below it for an image. However, when I add the image, it ends up directly under the table instead of at the bottom of the DIV. I have searched on G ...

javascriptjquerycss

What is the interaction between Vue's v-model and the update:modelValue directive, and how can we customize the default behavior to prevent it from

Could someone provide an explanation of the usage of v-model with :modelValue and update:modelValue? What happens when both are used together? In the code snippet below, a component is shown: <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3. ...

javascriptvue.jsvuejs3v-select

Using flexbox auto margin within nested elements: A guide

Is it possible to achieve consistent margins between the heading and list items using flexbox? section { display: flex; background: #eee; } h1 { background: #bbb; } ul { display: flex; flex: 1; list-style-type: none; background: #ccc; ...

cssflexbox

What is the best way to position my two icons next to each other in the footer of my React application?

I'm struggling with styling the footer of my react portfolio project. I specifically want to include Github and LinkedIn icons side-by-side at the bottom of the screen, but currently, they are stacked vertically in the middle of the page with too much ...

cssreactjssingle-page-applicationreact-bootstrapfooter

An error popped up out of the blue while attempting to execute Webpack

Looking to deploy my React website on IIS but encountering an error when running npm run build:prod. The error message states: index.js Line 1: Unexpected reserved word. You may need an appropriate loader to handle this file type. Below is the snippet fro ...

javascriptreactjsnpmwebpackpackaging

Troubleshooting problem with CSS overflow and absolute positioning on Android Browser

Our mobile web app was created using a combination of JQuery Mobile, PhoneGap, and ASP.net MVC. It is designed to function smoothly on both iOS and Android devices regardless of the browser being used. We have conducted tests on various devices and everyth ...

androidcsscordova

pressing the switch will adjust the size of the container

I am looking to implement a feature where clicking on an icon will resize a div to full screen in the browser. Below is the HTML code I have set up for this functionality, and I am open to suggestions on how to achieve this. <div> <a (click)= ...

javascriptcssangulariframe

Conceal a list of items within a div that has a particular class

This is a sample of my HTML code: <div class="row"> <div class="col-md-12"> <div class="scrollbox list"> <ul class="list-unstyled"> <li id="articulate.flute">articulate flut ...

javascriptjqueryhtmlcss

Rotating and moving two boxes using CSS3 transformations

I have two boxes, each measuring 200px by 200px, that I would like to animate using CSS animations. The first box (upper box) should rotate from rotateX(0deg) to rotateX(90deg) with a transform-origin of center top. The second box should follow the bottom ...

htmlcssanimation

What are the steps for incorporating a YouTube playlist into a website?

I'm in the process of creating a website and I'd like to incorporate a YouTube video playlist that looks similar to this example - http://www.youtube.com/user/icicibank/home. I plan to use HTML5, JavaScript, and the YouTube API. Can you provide g ...

javascriptjqueryyoutube-apihtml5-video

Using JavaScript to create a search bar: Can "no results found" only show after the user has completed typing their search query?

How can I ensure that the "no match" message only appears after the user has finished typing in their search query, rather than seeing it while they are still typing "De" and the list displays "Demi"? usernameInput.addEventListener("keyup",function(){ ...

javascripthtmlcssdom-eventsdisplay

What is preventing Kohana from reading my CSS?

Recently, I launched my website kipclip.com on the Kohana platform and added a new rental page. However, the CSS and JS files are not being applied to this page. I've looked into how these files are included in Kohana but haven't had any luck so ...

phpcsskohana

Opening a browser tab discreetly and extracting valuable data from it

Greetings to the experts in Chrome Extension development, I am exploring ways to access information from a webpage without actually opening it in a separate tab. Is there a method to achieve this? Here's the scenario: While browsing Site A, I come a ...

javascriptajaxgoogle-chrome-extension

The http url on an iPad in the src attribute of an HTML 5 video tag is malfunctioning

Having trouble loading a video on iPad using an http URL in the src attribute of an HTML5 video tag. Both static and dynamic approaches have been attempted, but it works fine on web browsers. Here is an example of the code: Static: <!DOCTYPE html ...

javascriptcsshtml

Validate if a string in JQuery contains a specific substring

How can I determine if one string contains another string? var str1 = "ABCDEFGHIJKLMNOP"; var str2 = "DEFG"; What function should I utilize to check if the string str1 includes the string str2? ...

javascriptjquerystringcomparisoncontains

Ways to demonstrate a specific attribute of the item included in the table

Currently, I am utilizing bootstrap vue and facing a challenge in passing relevant information to a component from the data being transferred to the table. <div> <b-table :items="guests" :fields="fields" : ...

bootstrap-4bootstrap-5bootstrap-vue

Is it possible for me to customize the CSS of the masterpage for a specific aspx file?

Recently, I completed a website that was almost ready to be published. However, my client now wants to add a new page with similar content as the main masterpage (including the logo, menu, and a few buttons), but with some changes in colors and background ...

htmlcssvb.net