After clicking the tab on bootstrap, I want to use Ajax function to display the data without screen transition.

<ul class="nav nav-pills nav-justified">
  <lic class="active"><a href="#home" data-toggle="tab">Home</a><li>;
  <li><a href="#profile" data-toggle="tab">Menu A</a></li>
  <li><a href="#messages" data-toggle="tab">Menu B</a></li>
</ul>
<div class="tab-content">
  <div class="tab-plane active" id="home">
    <h2>Learning by Slide</h2>
    Learn by looking at the slides.<br>
    Illustrated illustrations provide intuitive understanding.<br>
    You can learn at your own speed and look back whenever you need it.
  </div>
  <div class="tab-plane" id="profile">
    <h2>Exercise in Online Editor</h2>
    Learn more about slides through exercises in the online editor.<br>
    Programming improves only by writing code.<br>
    Let's code according to the instructions.
  </div>
  <div class="tab-plane" id="messages">
    <h2> Preview Results </h2>
    You can immediately see the results of the code you wrote in the editor.<br>
    Understanding what happened with the code you wrote, <br>
    We can proceed.
  </div>
</div>

bootstrap ajax

2022-09-30 20:15

2 Answers

The tab component of Bootsrap is divided into tabbed views and features using JavaScript (jQuery).

http://getbootstrap.com/javascript/ #tabs-usage

In the official website sample code,

$('#myTabs a').click(function(e){
  e.preventDefault()
  $(this).tab('show')
})

It is shown thatThis requires the div that makes up the tab component to be listed with id="myTabs".

Therefore,

<div class="tab-content">

<div class="tab-content" id="myTabs">

Let's say

2022-09-30 20:15

If the title is correct, I searched bootstrap tabajax and found many things.

Among them, it was in the main house, so I think it would be good to use it as a reference.

How to use AJAX loading with Bootstrap tabs?- Stack Overflow

However, if you look at the code,
All you want to see is on the same HTML, just show or hide
You can also read as shown in .

If so, I believe that if you change the title, the appropriate response will be given.

2022-09-30 20:15

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656