How to make the inactive tabs unclickable

Question

I have these tabs but is it possible to make the other inactive tabs to be unclickable?

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

Possible duplicate of [jquery - disable click](http://stackoverflow.com/questions/4589964/jquery-disable-click) — gus27, Mar 07 '17 at 15:34
It's important to specify as `tag` if you are using any framework (and version) on top of your code. For example this markup looks like a `bootstrap` code but I can't tell if is v3x or v4. This observation is because many framework has already build in methods to accomplish different actions (in this case) the disable state. — gmo, Mar 08 '17 at 08:37

score 1 · Answer 1 · answered Mar 07 '17 at 15:36

To get the best result you can:

Add the disabled class to the li element
Remove the data-toggle attribute for the 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>

score 1 · Answer 2 · answered Mar 07 '17 at 15:41

You can use :not() CSS selector with pointer-events: none; to disable click event.

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>

score 0 · Answer 3 · answered Mar 07 '17 at 15:33

0

Simply add this class to the tabs that you want to disable the clicks. Here is the css.

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

answered Mar 07 '17 at 15:33

MSH

297
1
3
12

not working for me... – GitHunter0 Feb 04 '22 at 16:43

score 0 · Answer 4 · answered Mar 07 '17 at 15:34

0

disable them all and enable the active one

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

answered Mar 07 '17 at 15:34

Fanyo SILIADIN

802
5
11

Hemant · Answer 5 · 2017-03-07T15:41:23.587

0

To disable the links on the fly using jquery try this:

$(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>

edited Mar 07 '17 at 15:41

answered Mar 07 '17 at 15:35

Hemant

1,961
2
17
27

score 0 · Answer 6 · edited May 23 '17 at 12:00

You can add the following rules to your non-active items to make them unclickable. This was suggested in the following post:

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>

How to make the inactive tabs unclickable

6 Answers6