如何使不活動的選項卡不可點擊

我有這些選項卡，但可以使其他非活動選項卡不可點擊嗎？如何使不活動的選項卡不可點擊

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

來源

2017-03-07 AyakoS

有關刪除'href'屬性是什麼？ – sandrooco

[jquery - 禁用單擊]的可能的重複（http://stackoverflow.com/questions/4589964/jquery-disable-click） – gus27

如果您在頂部使用任何框架（和版本），指定爲「標記」很重要的代碼。例如，這個標記看起來像一個'bootstrap'代碼，但我不知道是v3x還是v4。這種觀察是因爲許多框架已經建立了方法來完成不同的動作（在這種情況下）禁用狀態。 – gmo

只需將此類添加到要禁用點擊的選項卡即可。這是CSS。

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

來源

2017-03-07 15:33:30 MSH

禁用所有這些，使得活性一個

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

來源

2017-03-07 15:34:11

要使用jQuery試試這個禁止在飛行鏈接：

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

來源

2017-03-07 15:35:03

要獲得最好的結果你可以：

的disabled類添加到li元素
爲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>

來源

2017-03-07 15:36:43 DaniP

取出data-toggle屬性可以使用:not() CSS選擇器與pointer-events: none;禁用點擊事件。

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>

來源

2017-03-07 15:41:19 aje

您可以添加以下規則，以你的非活動項目，使他們無法點擊。這個建議在下面的帖子：

How to disable all div content

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>

來源

2017-03-07 15:57:01

如何使不活動的選項卡不可點擊

回答

相關問題