What is the best way to enable a visible bootstrap tab to be clicked more than once?

Question

What is the best way to enable a visible bootstrap tab to be clicked more than once?

Is there a way to override the default behavior on bootstrap tabs that prevents clicking on the currently shown tab? I need the user to be able to click on the tab again even if it is already active, as I am using AJAX to load content and reloading the page is not an option.

Here is a link to a js fiddle showing the issue: http://jsfiddle.net/xfw8t/12/

        <ul class="nav nav-tabs" id="myTab">
          <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
          <li><a data-target="#profile" data-toggle="tab">Profile</a></li>
          <li><a data-target="#messages" data-toggle="tab">Messages</a></li>
          <li><a data-target="#settings" data-toggle="tab">Settings</a></li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane active" id="home">Home</div>
          <div class="tab-pane" id="profile">Profile</div>
          <div class="tab-pane" id="messages">Message</div>
          <div class="tab-pane" id="settings">Settings</div>
        </div>

jQuery(function () {
    jQuery('#myTab a:last').tab('show')
})

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

Does this capture your intention?

$('#myTab').on('click',function(event){
    console.log($(event.target).text())
        //insert your ajax logic here to fetch the required data....

})

http://jsfiddle.net/xFW8t/1482/

Answer 2

Does this capture your intention?

$('#myTab').on('click',function(event){
    console.log($(event.target).text())
        //insert your ajax logic here to fetch the required data....

})

http://jsfiddle.net/xFW8t/1482/

Answer 3

Answer №2

It seems like you are looking for a way to update the content of a selected tab when the user clicks on it.

One approach is to use an onclick event.

<a data-target="#home" data-toggle="tab" onclick="window.location.reload();"> Home</a>

Another option is to activate a tab using jQuery.

$( "#tabId" ).tabs({ active: # });

Don't forget to replace the # with the specific tab index you want to activate.

Answer 4

It seems like you are looking for a way to update the content of a selected tab when the user clicks on it.

One approach is to use an onclick event.

<a data-target="#home" data-toggle="tab" onclick="window.location.reload();"> Home</a>

Another option is to activate a tab using jQuery.

$( "#tabId" ).tabs({ active: # });

Don't forget to replace the # with the specific tab index you want to activate.

Answer 5

Answer №3

One approach I tried was using JQuery's removeClass function to deactivate a tab that was activated by the "active" class.

By simply removing the class, the tab becomes available for clicking again.

Here's a snippet of the HTML code:

    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
        <li><a data-target="#profile" data-toggle="tab">Profile</a></li>
        <li><a data-target="#messages" data-toggle="tab">Messages</a></li>
        <li class="aa"><a class="clickme" data-toggle="tab" data-target="#settings" >Settings</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="home">Home</div>
        <div class="tab-pane" id="profile">Profile</div>
        <div class="tab-pane" id="messages">Message</div>
        <div class="tab-pane" id="settings">Settings</div>
    </div>

And here's the relevant Javascript code:

$('#myTab').on('click', function() {
    setTimeout(aa, 20);
})

function aa() {
    //alert("hi");
    $(".aa").removeClass('active');
     //$("li:last").off(".active");
     console.log(e.target);
}

You can also check out the Jsfiddle URL for reference - http://jsfiddle.net/Nagasai_Aytha/xFW8t/1485/

I hope you find this information useful :)

Answer 6

One approach I tried was using JQuery's removeClass function to deactivate a tab that was activated by the "active" class.

By simply removing the class, the tab becomes available for clicking again.

Here's a snippet of the HTML code:

    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
        <li><a data-target="#profile" data-toggle="tab">Profile</a></li>
        <li><a data-target="#messages" data-toggle="tab">Messages</a></li>
        <li class="aa"><a class="clickme" data-toggle="tab" data-target="#settings" >Settings</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="home">Home</div>
        <div class="tab-pane" id="profile">Profile</div>
        <div class="tab-pane" id="messages">Message</div>
        <div class="tab-pane" id="settings">Settings</div>
    </div>

And here's the relevant Javascript code:

$('#myTab').on('click', function() {
    setTimeout(aa, 20);
})

function aa() {
    //alert("hi");
    $(".aa").removeClass('active');
     //$("li:last").off(".active");
     console.log(e.target);
}

You can also check out the Jsfiddle URL for reference - http://jsfiddle.net/Nagasai_Aytha/xFW8t/1485/

I hope you find this information useful :)

Answer 7

Answer №4

Found the solution. The primary objective is to eliminate the active class from the currently active tab's li and your specified custom class. I have utilized custom-active instead of active for this purpose.

$(function () {
    var ok = $('#myTab a:last').tab('show')
    $(document).on('click', 'a[data-toggle="tab"]', function () {
      if($(this).parent().hasClass('active')){
          var $link = $('li.active a[data-toggle="tab"]');
          $link.parent().removeClass('active');
          var tabLink = $link.attr('href');
          $('#myTab a[href="' + tabLink + '"]').tab('show');
          $link.parent().addClass('custom-active');
       }
  });
})

To achieve this, some styling is required..

#myTab {

    .custom-active {
        border: 1px solid #ddd;
        border-bottom-color: transparent;
    }

}

Answer 8

Found the solution. The primary objective is to eliminate the active class from the currently active tab's li and your specified custom class. I have utilized custom-active instead of active for this purpose.

$(function () {
    var ok = $('#myTab a:last').tab('show')
    $(document).on('click', 'a[data-toggle="tab"]', function () {
      if($(this).parent().hasClass('active')){
          var $link = $('li.active a[data-toggle="tab"]');
          $link.parent().removeClass('active');
          var tabLink = $link.attr('href');
          $('#myTab a[href="' + tabLink + '"]').tab('show');
          $link.parent().addClass('custom-active');
       }
  });
})

To achieve this, some styling is required..

#myTab {

    .custom-active {
        border: 1px solid #ddd;
        border-bottom-color: transparent;
    }

}

What is the best way to enable a visible bootstrap tab to be clicked more than once?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using the "align" attribute is considered outdated and not recommended in HTML5 documents

Attempting to spread a non-iterable instance is invalid. For non-array objects to be iterable, they must have a [Symbol.iterator]() method

Node.js may not always save Winston log files when using process.exit()

In the Firefox browser, tables are shown with left alignment

Displaying mysqli results within a div while incorporating an onclick event for a javascript function that also includes another onclick event for a separate javascript function

Get the redirectUri using npm's Request package

Attempting to implement Vue js extensions without relying on NPM or webpack

React: An error has occurred - Properties cannot be read from an undefined value

Retrieve the date for the chosen time slot by utilizing the fullCalendar feature

The Navbar's Toggle Icon Causes Automatic Window Resize

Setting a unique identifier for a newly created element in JavaScript and the DOM

How can I align the title of a cell to the left while centering the remaining content?

unable to connect with the server

Having difficulty swapping out images on an HTML website template for Internet Explorer

Why am I not seeing my views when trying to export them from a file in my routes folder?

Cannot work on repl.it; it seems to be incompatible with the freeCodeCamp - JavaScript Algorithms and Data Structures Projects: Roman Numeral Converter

What is the importance of having references to maintain the existence of mutable objects?

Creating an Angular JS controller that utilizes a filter for a JSON array of objects

Vue js: Automatically assign alternate text to images that are not found

Finding Table Changes in PHP with Drupal DatabaseDiscovering alterations in database tables using PHP and Drupal