如何禁用點擊jquery列表下的img標籤？

我一個接一個地使用了4張圖像的列表，點擊每個圖像後，內容將在同一個html頁面中打開。現在的問題是我想在jQuery中給出具體的條件，如果我點擊img1那麼只有點擊選項應該出現在img2。如果我點擊img2那麼只有點擊選項應該出現在img3。我的代碼是如何禁用點擊jquery列表下的img標籤？

<ul id="one"> 
      <li class="list1"><img id="img1" src="images/assets/tool_deactive.png" > <img class="act1" style="display:none" src="images/assets/tool_active.png"><span class="para">Tools</span> 

      <li class="list2"><img id="img2" src="images/assets/protocol_dec.png"Disabled><img class="act2" style="display:none" src="images/assets/protocol_act.png"><span class="para">Protocols</span> 
      </li> 
      <li class="list3"><img id="img3" src="images/assets/data_dec.png"><img class="act3" style="display:none" src="images/assets/data_act.png"><span class="para">Data Generation</span> 
      </li> 
      <li class="list4"><img id="img4" src="images/assets/rules_dec.png"><img class="act4" style="display:none" src="images/assets/rules_act.png"><span class="para">Rules</span> 
      </li> 

     </ul>

我的jQuery代碼是

$(".list1").click(function() { 
     $(".rule2").hide(); 
     $(".mid1").show(); 
} 
$(".list2").click(function() { 
     $(".rule3").hide(); 
     $(".mid2").show(); 
} 
$(".list3").click(function() { 
     $(".rule4").hide(); 
     $(".mid3").show(); 
} 
$(".list4").click(function() { 
     $(".rule1").hide(); 
     $(".mid4").show(); 
}

如何使用jQuery給codition基於點擊的選項？

來源

2017-05-08 Hema Krishna

看看開啓和關閉 - 讓你綁定和取消綁定事件，甚至也許有，因爲它看起來像你只想綁定一個單擊事件 – Pete

隨着指針事件

$(".list").off("click").on("click",function(){ 
 
    $(".rule").eq($(this).index()).hide(); 
 
    $(".mid").eq($(this).index()).show(); 
 
    console.log("Hello") 
 
    $(this).addClass("none-events").next().removeClass("none-events") 
 
})

.none-events{ 
 
    pointer-events:none; 
 
} 
 
.list{ 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="one"> 
 
      <li class="list"><img id="img1" src="images/assets/tool_deactive.png" > <img class="act1" style="display:none" src="images/assets/tool_active.png"><span class="para">Tools</span> 
 

 
      <li class="list none-events"><img id="img2" src="images/assets/protocol_dec.png"Disabled><img class="act2" style="display:none" src="images/assets/protocol_act.png"><span class="para">Protocols</span> 
 
      </li> 
 
      <li class="list none-events"><img id="img3" src="images/assets/data_dec.png"><img class="act3" style="display:none" src="images/assets/data_act.png"><span class="para">Data Generation</span> 
 
      </li> 
 
      <li class="list none-events"><img id="img4" src="images/assets/rules_dec.png"><img class="act4" style="display:none" src="images/assets/rules_act.png"><span class="para">Rules</span> 
 
      </li> 
 

 
     </ul>

來源

2017-05-08 12:06:45

如何禁用點擊jquery列表下的img標籤？

回答

相關問題