Question

我是JavaScript的新手，并尝试修改代码以使其跨浏览器兼容。我正在尝试创建标签（链接），默认情况下menu_item3＆amp; menu_item4将被停用。此代码不适用于Mozilla＆amp; 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>

以下代码用于在页面加载时禁用链接，但在Mozilla＆amp; Chrome，仅限IE浏览器。

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

请建议如何在Mozilla＆amp;中禁用链接铬。

Answer 1

由于a不能disabled（以标准方式），请考虑使用更多jQuery-ish路由，并仅将onclick处理程序应用于菜单项而不disabled-state班。

这也会清理您的HTML，将onclick逻辑等移动到它所属的JavaScript。

＆＃13;

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);
})

＆＃13;

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

＆＃13;

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

＆＃13;

无法禁用＆＃34; href＆＃34;链接Mozilla＆amp;铬

1 个答案: