Javascript 在IE中单击按钮隐藏内容，该内容在Chrome/Firefox中应该是正确的
我有一个网页，我有一个右手面板，其中有不同的内容-这是由于点击左手锚标签中的链接填充。 策略“链接内容”有一个带有单击事件的按钮 如果单击此按钮，它将在右侧面板的标签中显示输出（在本例中是随机数的结果）。这在chrome/firefox中运行良好，但在IE中，只要单击此按钮，面板就会隐藏 通过IE/Edge中的代码进行调试我可以看到面板中的标签得到更新，但我不确定为什么在IE中它会决定隐藏面板。我看到的唯一线索是IE中的控制台显示 HTML1300:发生导航 我已经提取了简单的复制文件，并正在寻找任何可以解释IE/Edge正在做什么以及如何纠正它的帮助，以便我获得与Chrome相同的行为 repo.HTMLJavascript 在IE中单击按钮隐藏内容，该内容在Chrome/Firefox中应该是正确的,javascript,jquery,html,internet-explorer,onclick,Javascript,Jquery,Html,Internet Explorer,Onclick,我有一个网页，我有一个右手面板，其中有不同的内容-这是由于点击左手锚标签中的链接填充。 策略“链接内容”有一个带有单击事件的按钮 如果单击此按钮，它将在右侧面板的标签中显示输出（在本例中是随机数的结果）。这在chrome/firefox中运行良好，但在IE中，只要单击此按钮，面板就会隐藏 通过IE/Edge中的代码进行调试我可以看到面板中的标签得到更新，但我不确定为什么在IE中它会决定隐藏面板。我看到的唯一线索是IE中的控制台显示 HTML1300:发生导航 我已经提取了简单的复制文件，并正在寻
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="js/jquery.js"></script>
<script src="js/repro.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="page-header">
<h1>abc</h1>
</div>
<div class="row">
<div class="col-md-6">
<div id="mainpanel" class="well bs-component panel panel- default">
<h2>Jumper Details</h2>
<form>
<fieldset class="form-group">
<!-- Repro1 Content In Panel-->
<div class="checkbox">
<a href="#" onclick="displayContent('repro1')">Membership</a>
</div>
<!-- Policy Content In Panel -->
<div class="checkbox">
<a href="#" onclick="displayContent('repro2')">Policy</a>
</div>
</fieldset>
</form>
</div>
</div>
<div class="col-md-6">
<div id="contentpanel" class="panel panel-default ">
<div id="cp_inner" hidden>
<div class="panel-heading">
<h3 id="cp_heading">Content Panel Heading</h3>
</div>
<div class="panel-body">
<div id="cp_content">
<!--Content will be displayed in here..... -->
</div>
</div>
<div class="panel-footer ">
<!-- Possible Button to be clicked to confirm that you have read and checkbox will be updated -->
<button>OK (TO BE IMPLEMENTED)</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
abc
跳线详细信息
内容面板标题
OK（待实施）
REPROCONTENT1.HTML
<div>
<label id="ABC1">This is a test label for repro 1</label>
</div>
这是repro 1的测试标签
REPROCONTENT2.HTML
<form>
<div class="form-group">
<button id="ValidateButton" class="btn" onclick="validate123()">Validate</button>
</div>
<div>
<label id="PolicyResult" hidden></label>
<label id="Result"></label>
</div>
</form>
<script>
function validate123() {
var xresult = Math.floor((Math.random() * 3) );
//Display results
var sResult = "";
switch (xresult) {
case 0:
sResult = "Result 0"
break;
case 1:
sResult = "Result 1"
break;
case 2:
sResult = "Result 2"
break;
case 3:
sResult = "Result 3"
break;
default:
sResult = "<p>Unknown</p>";
break;
}
//Display the output string
document.getElementById('Result').style.display = "block";
document.getElementById('Result').innerHTML = sResult
}
</script>
验证
函数validate123（）{
var xresult=Math.floor（（Math.random（）*3））；
//显示结果
var sResult=“”；
开关（xresult）{
案例0：
sResult=“结果0”
打破
案例1：
sResult=“结果1”
打破
案例2：
sResult=“结果2”
打破
案例3：
sResult=“结果3”
打破
违约：
sResult=“未知””；
打破
}
//显示输出字符串
document.getElementById（'Result'）.style.display=“block”；
document.getElementById（'Result'）。innerHTML=sResult
}
repo.JS
var KnownChkItems = [
{ Name: "Repro1", Heading: "Membership", ContentURL: "content/reproContent1.html" },
{ Name: "Repro2", Heading: "Policy", ContentURL: "content/reproContent2.html" },
]
function displayContent(name) {
// This will get the content pages for each of the check items.
// It is done this way to separate the content details from the basic page framework.
var contentHeading = "";
var chkItem = findKnownChkItem(name);
if (chkItem != null) {
$("#cp_inner").attr("hidden", false)
if (name.toLowerCase() === "repro2") {
$.ajaxSettings.cache = false;
$("#cp_content").load(chkItem.ContentURL + '?caching=' + new Date().getTime(), function () {
console.log("policy content");
});
}
else {
$("#cp_content").load(chkItem.ContentURL);
console.log(name + " content");
}
$("#cp_heading").text(name);
}
else {
// display unknown chkitem detail
// $("#cp_inner").attr("hidden", true)
}
}
function findKnownChkItem(name) {
// case insensitive search of names and Headings against the KnownChkItems array
// we use these KnownChkItems to set content and headings for the content panel.
//Search Names
for (var i = 0; i < KnownChkItems.length; i++) {
if (KnownChkItems[i].Name.toLowerCase() === name.toLowerCase()) {
return KnownChkItems[i];
break;
}
}
//Search Headings
for (var i = 0; i < KnownChkItems.length; i++) {
if (KnownChkItems[i].Heading.toLowerCase() === name.toLowerCase()) {
return KnownChkItems[i];
break;
}
}
return null;
}
var KnownChkItems=[
{Name:“Repro1”，标题：“Membership”，ContentURL:“content/reproContent1.html”}，
{Name:“Repro2”，标题：“Policy”，ContentURL:“content/reproContent2.html”}，
]
函数displayContent（名称）{
//这将获得每个检查项的内容页。
//这样做是为了将内容细节从基本页面框架中分离出来。
var contentHeading=“”；
var chkItem=findKnownChkItem（名称）；
如果（chkItem！=null）{
$（“cp#U内部”）.attr（“隐藏”，false）
if（name.toLowerCase（）=“repro2”）{
$.ajaxSettings.cache=false；
$（“#cp_content”）.load（chkItem.ContentURL+”？缓存=“+新日期（）.getTime（），函数（）{
console.log（“策略内容”）；
});
}
否则{
$（“#cp_content”）.load（chkItem.ContentURL）；
控制台日志（名称+内容）；
}
$（“#cp#U标题”）。文本（名称）；
}
否则{
//显示未知的chkitem详细信息
//$（“cp#U内部”）.attr（“隐藏”，真）
}
}
函数findKnownChkItem（名称）{
//根据KnownChkItems数组对名称和标题进行不区分大小写的搜索
//我们使用这些KnownChkItems为内容面板设置内容和标题。
//搜索名称
对于（var i=0；i更改为使用显示没有帮助-我仍然有面板做不同的行为-几乎就像事件发生在标签更新后导致不同的行为。
$("#cp_inner").attr("display", "none"); // to hide
$("#cp_inner").attr("display", ""); // to show. "block" and "inline" also work but look them up before you use them to understand the difference.