Question

我试图在三个div上进行简单的显示/隐藏。它在IE中运行良好，但onClick功能在Chrome或FireFox中无效。

这是我的代码（简化了div内容）：

＆＃13;

$(function showHide() {
  $("#showaudience").click(function() {
    $("#behavior").hide();
    $("#acquisition").hide();
    $("#audience").show();
  });
  $("#showbehavior").click(function() {
    $("#behavior").show();
    $("#acquisition").hide();
    $("#audience").hide();
  });
  $("#showacquisition").click(function() {
    $("#behavior").hide();
    $("#acquisition").show();
    $("#audience").hide();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
  <input type="button" id="showaudience" value="Audience" onClick="showHide"></input>
  <input type="button" id="showbehavior" value="Behavior" onClick="showHide"></input>
  <input type="button" id="showacquisition" value="Acquisition" onClick="showHide"></input>
</div>

<div id="audience" style="display:block;">Audience Data</div>
<div id="behavior" style="display:none;">Behavior Data</div>
<div id="acquisition" style="display:none;">Acquisition Data</div>

＆＃13;

Answer 1

删除不需要的onClick="showHide"。

由于您已经使用jQuery绑定事件处理程序，因此不需要使用内联单击处理程序。它的语法也不正确。

此外，修改input因为它是空元素

<input type="button" id="showaudience" value="Audience" />

$(function showHide() {
  $("#showaudience").click(function() {
    $("#behavior").hide();
    $("#acquisition").hide();
    $("#audience").show();
  });
  $("#showbehavior").click(function() {
    $("#behavior").show();
    $("#acquisition").hide();
    $("#audience").hide();
  });
  $("#showacquisition").click(function() {
    $("#behavior").hide();
    $("#acquisition").show();
    $("#audience").hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
  <input type="button" id="showaudience" value="Audience" />
  <input type="button" id="showbehavior" value="Behavior" />
  <input type="button" id="showacquisition" value="Acquisition" />
</div>

<div id="audience" style="display:block;">Audience Data</div>
<div id="behavior" style="display:none;">Behavior Data</div>
<div id="acquisition" style="display:none;">Acquisition Data</div>

Answer 2

您可以更改jQuery onLoad处理程序，将点击处理程序直接应用于按钮元素，并从中删除onclick属性，并使<input />标记自包含，因为他们不需要关闭标签。

＆＃13;

$(function () {
  $("#showaudience").click(function() {
    $("#behavior").hide();
    $("#acquisition").hide();
    $("#audience").show();
  });
  $("#showbehavior").click(function() {
    $("#behavior").show();
    $("#acquisition").hide();
    $("#audience").hide();
  });
  $("#showacquisition").click(function() {
    $("#behavior").hide();
    $("#acquisition").show();
    $("#audience").hide();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
  <input type="button" id="showaudience" value="Audience"/>
  <input type="button" id="showbehavior" value="Behavior"/>
  <input type="button" id="showacquisition" value="Acquisition"/>
</div>

<div id="audience" style="display:block;">Audience Data</div>
<div id="behavior" style="display:none;">Behavior Data</div>
<div id="acquisition" style="display:none;">Acquisition Data</div>

＆＃13;

jQuery show hide在Chrome和FF中无效

2 个答案: