MozillaとChromeの「href」リンクを無効にできません

Question

JavaScriptを初めて使用しています。ブラウザに対応した互換モードにするため、コードを変更しました。タブ（リンク）を作成しようとしていますが、デフォルトではmenu_item3 & menu_item4が無効になります。このコードはMozilla & Chromeでは動作しません。IEのみで動作します。以下は、タブを作成するためのコードです。コードの下

<ul> 
    <li id="menu_item1" class="selectedtab"> 
     <a href="javascript:;" onclick="showTab(this)"> 
      <span style="color:black; font-weight: bold;">Report Options</span> 
     </a> 
    </li> 
    <li id="menu_item2"> 
     <a href="javascript:;" onclick="showTab(this)"> 
      <span style="color:black; font-weight: bold;">Required Filters</span> 
     </a> 
    </li> 
    <li id="menu_item3" class="disabled-state"> 
     <a href="javascript:;" onclick="showTab(this)" disabled='disabled'> 
      <span style="color:black; font-weight: bold;">Optional Filters</span> 
     </a> 
    </li> 
    <li id="menu_item4" class="disabled-state"> 
     <a href="javascript:;" onclick="showTab(this)" disabled='disabled'> 
      <span style="color:black; font-weight: bold;">Confirmation</span> 
     </a> 
    </li> 
</ul> 

は、ページがロードされますときに、リンクを無効にするために使用されているが、それはIEのみで、Mozillaの& Chromeで動作していません。

var ItemA = document.getElementById('menu_item3').getElementTagName('a')[0]; 
ItemA.disabled=true; 

Mozilla & Chromeでリンクを無効にする方法をお勧めします。 a以来

Answer 1

はdisabledは（標準的な方法で）、より多くのjQueryっぽいルートを行く考える、とだけdisabled-stateクラスせずにメニュー項目にonclickハンドラを適用することはできません。

これはまた、あなたのHTMLをクリーンアップし、onclickロジックなどを、それが属するJavaScriptに移動します。

function showTab(el) { 
 
    console.log("clicked " + el.parentNode.id); 
 
} 
 

 
// only apply to <a> elements, within .menuitems, that are children 
 
// of <li> items without the disabled-state class 
 
// 
 
$('.menuitems').on('click', "li:not(.disabled-state) a", function() { 
 
    showTab(this); 
 
})

.menuitems a span { 
 
    color: black; 
 
    font-weight: bold; 
 
} 
 
.disabled-state a { 
 
    text-decoration: none; 
 
    cursor: default; 
 
} 
 
.menuitems .disabled-state a span { 
 
    font-weight: normal; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class=menuitems> 
 
    <li id="menu_item1" class="selectedtab"> 
 
    <a href="javascript:;"> 
 
     <span>Report Options</span> 
 
    </a> 
 
    </li> 
 
    <li id="menu_item2"> 
 
    <a href="javascript:;"> 
 
     <span>Required Filters</span> 
 
    </a> 
 
    </li> 
 
    <li id="menu_item3" class="disabled-state"> 
 
    <a href="javascript:;"> 
 
     <span>Optional Filters</span> 
 
    </a> 
 
    </li> 
 
    <li id="menu_item4" class="disabled-state"> 
 
    <a href="javascript:;"> 
 
     <span>Confirmation</span> 
 
    </a> 
 
    </li> 
 
</ul>