Wie man die inaktiven Tabs unclickable macht

Question

Ich habe diese Registerkarten, aber ist es möglich, die anderen inaktiven Tabs unclickable zu machen?

<div class="navbar"> 
    <div class="navbar-inner"> 
     <ul class="nav nav-tabs" style="display:inline-flex"> 
      <li class="active"><a href="#step1" data-toggle="tab">Step 1</a></li> 
      <li><a href="#step2" data-toggle="tab">Step 2</a></li> 
      <li><a href="#step3" data-toggle="tab">Step 3</a></li> 
      <li><a href="#step4" data-toggle="tab">Step 4</a></li> 
      <li><a href="#step5" data-toggle="tab">Step 5</a></li> 
      <li><a href="#step6" data-toggle="tab">Step 6</a></li> 
      <li><a href="#step7" data-toggle="tab">Step 7</a></li> 
     </ul> 
     </div> 
    </div> 

Answer 1

Fügen Sie diese Klasse einfach zu den Registerkarten hinzu, auf denen Sie die Klicks deaktivieren möchten. Hier ist das CSS.

.avoid-clicks { 
pointer-events: none; 
} 

Answer 2

deaktivieren sie alle und ermöglichen die aktive

$('li').prop('disabled',true); 
$('.active').prop('disabled',false); 

Answer 3

Um die Links on the fly mit Jquery versuchen, diese zu deaktivieren:

$(document).ready(function(){ 
 
    $("a").click(function(event){ 
 
     event.preventDefault(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<a href="https://google.com/">Go to google</a>

Answer 4

die Um bestes Ergebnis, das Sie können:

1. Fügen Sie die disabled Klasse zum li Element
2. Entfernen Sie die data-toggle Attribut für den a

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="navbar"> 
 
    <div class="navbar-inner"> 
 
     <ul class="nav nav-tabs" style="display:inline-flex"> 
 
      <li class="active"><a href="#step0" data-toggle="tab">Step 0</a></li> 
 
      <li><a href="#step1" data-toggle="tab">Step 1</a></li> 
 
      <li class="disabled"><a href="#step2" >Step 2</a></li> 
 
      <li class="disabled"><a href="#step3" >Step 3</a></li> 
 
      <li class="disabled"><a href="#step4" >Step 4</a></li> 
 
      </ul> 
 
     </div> 
 
    </div>

Answer 5

Sie :not() CSS-Selektor mit pointer-events: none; verwenden können, um Click-Ereignis zu deaktivieren .

li:not(.active) a{ 
 
pointer-events: none; 
 
}

<div class="navbar"> 
 
    <div class="navbar-inner"> 
 
     <ul class="nav nav-tabs" style="display:inline-flex"> 
 
      <li class="active"><a href="#step1" data-toggle="tab">Step 1</a></li> 
 
      <li><a href="#step2" data-toggle="tab">Step 2</a></li> 
 
      <li><a href="#step3" data-toggle="tab">Step 3</a></li> 
 
      <li><a href="#step4" data-toggle="tab">Step 4</a></li> 
 
      <li><a href="#step5" data-toggle="tab">Step 5</a></li> 
 
      <li><a href="#step6" data-toggle="tab">Step 6</a></li> 
 
      <li><a href="#step7" data-toggle="tab">Step 7</a></li> 
 
     </ul> 
 
     </div> 
 
    </div>

Answer 6

Sie können die folgenden Regeln auf Ihre nicht-aktiven Elemente hinzufügen, um sie unclickable zu machen. Dies wurde in der folgenden Posten vorgeschlagen:

How to disable all div content

.disabled, li:not(.active) { 
    pointer-events: none; 
    opacity: 0.4; 
} 

ul { 
 
    display: inline-flex; 
 
    width: 100%; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 1em; 
 
    line-height: 1em; 
 
} 
 

 
li { 
 
    width: 14%; 
 
    height: 2em; 
 
    margin: 0.1%; 
 
    line-height: 2em; 
 
    background-color: #FFF; 
 
    border: thin solid #777; 
 
    text-align: center; 
 
} 
 

 
li a { 
 
    display: block; 
 
    width: 100%: 
 
    height: 100%; 
 
    text-decoration: none; 
 
} 
 
li a, li a:active, li:visited { 
 
    color: #48A; 
 
} 
 
li a:hover { 
 
    color: #5AC; 
 
    text-decoration: underline; 
 
} 
 
.active { 
 
    background-color: #FFF; 
 
    font-weight: bold; 
 
    border: thin solid #DDD; 
 
} 
 

 
.disabled, li:not(.active) { 
 
    background-color: #AAA; 
 
    pointer-events: none; 
 
    opacity: 0.4; 
 
}

<div class="navbar"> 
 
    <div class="navbar-inner"> 
 
    <ul class="nav nav-tabs"> 
 
     <li class="active"><a href="#step1" data-toggle="tab">Step 1</a></li> 
 
     <li><a href="#step2" data-toggle="tab">Step 2</a></li> 
 
     <li><a href="#step3" data-toggle="tab">Step 3</a></li> 
 
     <li><a href="#step4" data-toggle="tab">Step 4</a></li> 
 
     <li><a href="#step5" data-toggle="tab">Step 5</a></li> 
 
     <li><a href="#step6" data-toggle="tab">Step 6</a></li> 
 
     <li><a href="#step7" data-toggle="tab">Step 7</a></li> 
 
    </ul> 
 
    </div> 
 
</div>