Initial Troubles with Bootstrap Tabs

Currently, I am working on setting up two basic tabs and panels. When the page loads, the content (Page 1) in the panel does not display, although clicking on the second tab shows the correct content (Page 2). Interestingly, when I go back to the first tab, it displays the content as expected (Page 1).

<ul class="nav nav-tabs">
    <li class="active"><a href="#panel1" data-toggle="tab">Page 1</a></li>
    <li><a href="#panel2" data-toggle="tab">Page 2</a></li>
</ul>

<div class="tab-content">
    <div id="panel1" class="tab-pane">
        Page 1
    </div>
    <div id="panel2" class="tab-pane">
        Page 2
    </div>
</div>

I'm unsure if I might be overlooking something important. Can anyone point me in the right direction?

javascriptbootstrap-4bootstrap-tabs

Answer №1

The active class is missing for the content panel. To display the panel1 content by default, include the following code:

<div id="panel1" class="tab-pane show active">...

Answer №2

It appears that your code is functioning correctly, but providing more details would be helpful.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs">
    <li class="active"><a href="#panel1" data-toggle="tab">Page 1</a></li>
    <li><a href="#panel2" data-toggle="tab">Page 2</a></li>
</ul>

<div class="tab-content">
    <div id="panel1" class="tab-pane show active">
       This is the content of page1............................
    </div>
    <div id="panel2" class="tab-pane">
       This is the content of page2............................
    </div>
</div>

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

send array to the sort function

How can I sort a data array that is returned from a function, rather than using a predefined const like in the example below: const DEFAULT_COMPETITORS = [ 'Seamless/Grubhub', 'test']; DEFAULT_COMPETITORS.sort(function (a, b) { re ...

javascriptarrays

Leveraging the power of Ajax and Nodejs to dynamically refresh content on a webpage

I'm currently working on creating a loop to refresh a webpage every 30 seconds, but I'm facing some challenges with making an ajax call using the setInterval function. Below is a snippet of my server-side code: var app = express() app.get(' ...

javascriptajaxexpress

Creating precise squares in JavaScript and animating their movement at designated intervals

My goal for the Final Project is to create a JavaScript-based game similar to Guitar Hero, but with squares instead of circles representing the notes. In Guitar Hero, players have to hit the notes at specific times. I am facing a challenge in my code wher ...

javascripthtmlcanvas

Can anyone assist me with this HTML/jQuery code?

Despite my efforts, I've been unable to achieve success. The challenge I'm facing is with duplicating controls for adding images. I have a button and a div where the user can choose an image by clicking the button. The selected image appears in ...

javascriptjqueryhtmlcss

Guide to incorporating a component in Vue 2

I recently developed a Vue 2.5.2 application using vue-cli. While attempting to create my first component (<jsontree />), I encountered an issue as it functions independently, but I am struggling to understand how to properly register it for use in ...

javascriptvue.jsvuejs2

Failed authentication for Postgres database

I'm puzzled by the error message I received: DB authentication failed: SequelizeConnectionError: Ident authentication failed for user "smemamian" at connection.connect.err (/home/sunyar/API/node_modules/sequelize/lib/dialects/postgres/con ...

javascriptnode.jspostgresql

Do not include any null or empty objects when assigning to an array in Mongoose

When using mongoose's find() or findOne() methods, the returned value will be [] and null, respectively, if the where conditions are not met. This can cause issues when assigning these values to an array. Currently, I am filtering out the null values ...

javascriptnode.jsmongoose

The utilization of $(this) proves to be ineffective

I've been working on getting a script to add events to a specific DIV within a class using pep.js: $( ".drag" ).pep({ start: function() { $(".drag").addClass('color'); $('.drag').next(".text").fadeIn("slow"); ...

javascriptjquerythis

Transferring data between two functions within a React.js application

I have two functions called getLocation() and getLocationName(). The getLocation() function performs an XMLHttpRequest, and I want to pass the response to the getLocationName() function to display it in a list. getLocationName = (location) => { var ...

javascriptreactjs

Using https to access a CDN from a website that is running on http

As I work on building a website with HTTP, I've encountered an issue when trying to add jQuery from the Google CDN. In response to my question, a user on Stack Overflow shared that using protocol-relative URLs can help prevent mixed content security ...

javascripthtml

The isolate scope variable is becoming undefined within the link function

When working with a directive that takes a data object and a function in its isolate scope, I encountered an issue. Inside the link function, I declared a method to be triggered on a button click event. The problem is that while the value passed to the me ...

javascriptangularjsangularjs-directiveangularjs-scope

Learn how to obtain a response for a specific query using the `useQueries` function

Can we identify the response obtained from using useQueries? For instance, const ids = ['dg1', 'pt3', 'bn5']; const data = useQueries( ids.map(id => ( { queryKey: ['friends', id], queryFn: () =&g ...

javascriptreactjsreact-query

Eliminate all elements marked with a particular class when the user clicks outside of a

I am currently building upon a project that I previously started here. Essentially, what I'm doing is dynamically generating tooltip popups that appear next to a link when it is clicked. However, I now need these tooltips to close when any click even ...

javascriptjqueryhtmlcss

The intricacies of the Jscript ReadLine() function

I am trying to figure out how to read the complete content of a .txt file using JavaScript. I know that ReadLine() can be used to read a specific line from a file, but I need a method that will allow me to read the entire contents of the file. I have searc ...

javascriptjscript-10

Ways to generate multiple elements using JavaScript

Is there a way to dynamically freeze columns in a table as I scroll it horizontally? I've achieved this statically using JavaScript, but is there a way to indicate the number of columns and achieve the desired style? This is what my JavaScript code c ...

javascripthtmlcssdom

What indicators should we look for to decide if JavaScriptExecutor is needed in a Selenium C# project?

Encountering an exception with TestInChrome1 - "OpenQA.Selenium.ElementNotInteractableException: element not interactable". On the other hand, using JavaScriptExecutor in TestInChrome2 resolves the issue. Some key questions arise: What is causing the ...

javascriptc#seleniumselenium-webdriverpage-title

Sharing information through a hyperlink to a Bootstrap popup window

I've been attempting to send data to a Bootstrap modal window with no success so far. First, I tried: <a href="#TestModal?data=testdata" role="button" class="btn" data-toggle="modal">Test</a> However, the modal did not open as expected. ...

javascriptjqueryhtmltwitter-bootstrap

Eliminating redundant values from a JSON object that is nested within another

Currently, I am working on rendering a list of Labels from a local JSON file. However, I am facing the issue of duplicates and I want each label to appear only once. I attempted to use Array.filter() and other methods to achieve this line: "Categories": ob ...

javascriptjqueryarraysjsonduplicates

Protractor: Locating Elements Based on Attributes

I have been looking for a specific element to test: <div class="alert alert-danger" role="alert" ng-show="notValid">Zugangsdaten eingeben</div> How do I locate this element to verify its visibility based on the ng-show attribute? The ng-show ...

javascriptangularjstestingjasmineprotractor

Switching Vue.js from the standalone build to the runtime-only build midway through a project?

Opted for the runtime-only version of Vue.js for a new project. I came across in the documentation that to switch to the standalone version, one must include an alias in webpack like this: resolve: { alias: { 'vue$': 'vue/dist/vue.js& ...

javascriptvue.jsvuejs2