Twitter Bootstrap: modal dialogue tabs

Question

What I want: disable opening a -references in new browser tab/window.

Possible solution: Replace href attribute of a -reference with data-href .

Problem: Due twitter bootstrap implementation, to switch across modal dialog tabs you must use href attribute; data-href doesn't work.

Question: How should I change bootstrap.css to make it work for data-href attribute?

Demo: You can play with JS Fiddle Demo .

Answer 1

I don't know how you can do this by just by css...

But maybe this alternative way could help you ?

Fiddle : http://jsfiddle.net/3kgbG/169/

In JS : Create data-href attribute, remove the original href, and perform the active class change manually...

JS :

$('.launchConfirm').on('click', function (e) {
    $('#confirm').modal("show");  
});

$('[data-toggle="tab"]').each(function(){
    var dest = $(this).attr('href');
    $(this).attr('data-href',dest).removeAttr('href');
    $(this).on('click', function(){
       $('.tab-pane').removeClass('active');
       $(dest).addClass('active'); 
    });
});

Answer 2

The solution is very simple: add oncontextmenu="return false;" to the ul element.

<ul class="nav nav-tabs" oncontextmenu="return false;">
  <li class="active"><a href="#home" data-toggle="tab">Home Tab</a></li>
  <li><a href="#profile" data-toggle="tab">Profile Tab</a></li>
</ul>