what's causing the tabs in bootstrap to malfunction

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="pill" href="#home">Images</a>
  </li>
  <li><a data-toggle="pill" href="#songs">Songs</a>
  </li>
  <li><a data-toggle="pill" href="#menu2">Video</a>
  </li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <div class="uploaded-image-ct">
      <button type="button" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-picture"></span> Upload image
      </button>

    </div>
  </div>

  <div id="songs" class="tab-pane fade">
    <div class="form-group">
      <input id="song-link" placeholder="Paste Soundcloud link here" type="text">
    </div>
  </div>

  <div id="video" class="tab-pane fade">
    <div class="form-group">
      <input placeholder="Paste YouTube link here" type="text">
    </div>

  </div>

</div>

https://i.sstatic.net/0DMa1.png

the video section should show youtube which there on html but not on the page.

i checked whether jquery is loaded ahead of bootstrap.js.. But still it is not working. Turns out the tab button is not working like it should. although when u click on image button image section will be shown. Is it the problem only with input tag?

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Snippet in Action:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="pill" href="#home">Images</a>
  </li>
  <li><a data-toggle="pill" href="#songs">Songs</a>
  </li>
  <li><a data-toggle="pill" href="#video">Video</a>
  </li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <div class="uploaded-image-ct">
      <button type="button" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-picture"></span> Upload image
      </button>

    </div>
  </div>

  <div id="songs" class="tab-pane fade">
    <div class="form-group">
      <input id="song-link" placeholder="Paste Soundcloud link here" type="text">
    </div>
  </div>

  <div id="video" class="tab-pane fade">
    <div class="form-group">
      <input placeholder="Paste YouTube link here" type="text">
    </div>

  </div>

</div>

The anchor tag in jQuery should have the correct href, pointing to the specific tab-pane.

Your original code was:

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="pill" href="#home">Images</a>
  </li>
  <li><a data-toggle="pill" href="#songs">Songs</a>
  </li>
  <li><a data-toggle="pill" href="#menu2">Video</a>
  </li>
</ul>

To fix this, ensure that the href for the Video tab points to #video:

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="pill" href="#home">Images</a>
  </li>
  <li><a data-toggle="pill" href="#songs">Songs</a>
  </li>
  <li><a data-toggle="pill" href="#video">Video</a>
  </li>
</ul>

Answer №2

Your video pill has the following:

  <li><a data-toggle="pill" href="#menu2">Video</a>

however, the id of the tab you are trying to link it to is:

<div id="video" class="tab-pane fade">

To resolve this issue, you need to change the pill to match the same id 

 <li><a data-toggle="pill" href="#video">Video</a>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="pill" href="#home">Images</a>
  </li>
  <li><a data-toggle="pill" href="#songs">Songs</a>
  </li>
  <li><a data-toggle="pill" href="#video">Video</a>
  </li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <div class="uploaded-image-ct">
      <button type="button" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-picture"></span> Upload image
      </button>

    </div>
  </div>

  <div id="songs" class="tab-pane fade">
    <div class="form-group">
      <input id="song-link" placeholder="Paste Soundcloud link here" type="text">
    </div>
  </div>

  <div id="video" class="tab-pane fade">
    <div class="form-group">
      <input placeholder="Paste YouTube link here" type="text">
    </div>

  </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

Hide the external div if the tab is active in Angular Bootstrap

How can I determine if a specific tab is active and then hide a div outside all tabs when it is active? Plunker: https://plnkr.co/edit/b9O9S7JxxgzhQKcKONkn?p=preview <div class="border"> Conceal me when Tab #3 is active. </div> < ...

javascriptangularjstwitter-bootstrapangular-ui-bootstrapangular-ui-bootstrap-tab

Implementing a custom button specifically for the month view in JavaScript FullCalendar

I have successfully added a custom button to my JavaScript full calendar code, but I would like this button to be displayed only in the month view. $(document).ready(function() { var calendar = $('#calendar').fullCalendar({ editable: tru ...

javascriptajaxfullcalendarfullcalendar-3

Extrude a face in Three.js along its respective normal vector

My goal is to extrude faces from a THREE.Geometry object, and my step-by-step approach involves: - Specifying the faces to be extruded - Extracting vertices on the outer edges - Creating a THREE.Shape with these vertices - Extruding the shape using THREE.E ...

javascriptvectorthree.jsgeometry

A guide on including a class to a DOM element in Angular 6 without relying on Jquery

Currently, I have created a component template using Bootstrap that looks like this: <div class="container"> <div class="row my-4"> <div class="col-md-12 d-flex justify-content-center"> <h2> ...

javascriptjqueryangulartypescriptangularjs-directive

Is the strange z-index behavior causing issues with mouse interactions a bug or a standard occurrence?

Whenever I attempt to adjust the z-index on my webpage to rearrange the layering of overlapping divs, I always encounter an issue where the lower div becomes unresponsive to mouse events. Currently, my setup includes: <div class="leftcolumn"> <d ...

htmlcssfirefoxgoogle-chromez-index

Upon redirection, my JavaScript codes cease to function properly and require a page refresh to resolve

Upon redirecting to another page with included JS codes, my main.html does not function properly until I refresh the page. What steps can be taken to resolve this issue? 0.html <body data-theme="b"> <div class="p2" data-role="page" id="p2"> ...

javascriptjqueryhtmlajax

Sliding multiple divs up and down with jQuery

Here is the code that I am working with: JavaScript: $(".Head").click(function () { if ($(".Body").is(":hidden")) { $(".Body").slideDown('fast'); } else { $(".Body").slideUp('fast'); } }); HTML: ...

javascriptjqueryhtml

Utilizing jQuery Functions on Dynamically Generated Items within a Chrome Extension

My Chrome extension is running jQuery smoothly, except for dynamically created elements. It triggers an error message that reads: Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self& ...

javascriptjquerygoogle-chrome-extension

Encountering problem with JSON in the bodyParser function

I've encountered an issue while sending data from my React component using the Fetch API and receiving it as JSON on my Express server. When I try to parse the data using the jsonParser method from bodyParser, I only get back an empty object. Strangel ...

javascriptjsonexpressfetch-apibody-parser

Highlight all text in the textbox upon selection

I discovered a helpful script on how to select all contents of a textbox when it receives focus using JavaScript or jQuery. My attempt to implement this in IE10 revealed that the focus was being cleared at a later time, and my efforts to prevent this (whi ...

javascriptjqueryinternet-explorer-10

Tips on organizing a JSON object for a JavaScript project

For my project, I am designing a data structure that utilizes JSON. My goal is to create an efficient method for searching and editing the JSON object. Which structure would be considered standard in this scenario? Is there a preferred way to implement eit ...

javascriptjson

How can I alter the background color while performing a transformation in JS/CSS?

I'm currently working on achieving a flipboard effect for some divs, where one side is white and the other is black. Here's what I have so far: setInterval(function () { document.getElementById('test').classList.toggle('flipped& ...

javascripthtmlcss

Customizing the "added to cart" message in Woocommerce and setting up a notification system for customers

My main focus is on customizing the Woocommerce notation system for a personalized shopping cart experience. After some research, I stumbled upon a very helpful user response which suggested modifying the message by adding the following code snippet to th ...

javascriptphpwordpresswoocommerce

The selected attribute does not function properly with the <option> tag in Angular

Currently, I am faced with a challenge involving dropdowns and select2. My task is to edit a product, which includes selecting a category that corresponds to the product. However, when I open the modal, the selected group/category is not displayed in the d ...

javascriptjqueryangularjquery-select2

A guide on automating the html5 color picker using input type="color" in selenium webdriver

When interacting with an HTML color input element, a color picker window pops up that prevents viewing the DOM. I am looking for a solution to either select a color and close the window or enter a hex code in the popup's text box. Can anyone provide m ...

javascripthtmlseleniumautomation

Ways to display a GIF image as a pop-up during data loading in an MVC application

I am working on a project using the MVC framework. The application retrieves a large amount of data during loading. I would like to display a loading image - a .gif file while fetching records. Below is the code snippet I am currently using: //Loads rec ...

javascripthtml

Potential Performance Issue with Material UI's withStyles Function

I've been given the task of optimizing the loading speed of a page in our react redux web app. When the page load action is triggered, there seems to be a slight freeze lasting about half a second. After checking the profiler, everything seems fine ...

cssreactjsperformancematerial-uicss-in-js

Style the code presented within a div tag

I am in the process of creating a JavaScript-powered user interface that can generate code based on user interactions. While I have successfully implemented the code generation functionality and saved the generated code as a string, I am facing difficultie ...

javascriptjqueryindentation

There was a parsing error due to an unexpected token, and we were expecting a comma instead

Below is the code snippet written in react js: class Posts extends Component { render() { return ( {console.log('test')} ); } } When I executed this code, an error occurred stating: Parsing error: Unexpected token, expected " ...

javascriptreactjs

Having Trouble with jQuery toggleClass

I'm currently working on a project where I have implemented a button that displays a menu when clicked. I am attempting to change the color of the button when it is active, however, the toggleClass function is not behaving as expected. Below is the co ...

jqueryhtmlcss