我正在使用 Microsoft Dynamics CRM 2013 并尝试创建一个数据切换 block ，它会根据所选类别切换值。该列表有 7 个 div，应该只显示所选的 div(即 div 3)，而不显示所有其他的。 html 在浏览器中工作起来就像一个魅力，但在 CRM 中却没有，这意味着当 js、css 和 html 使用 Web 资源添加到 CRM 2013 时，没有任何类别会切换。我不是开发人员，但需要弄清楚如何去做。任何帮助是极大的赞赏!! 这是输入到 CRM 中的整个 html 网络资源 这是在 jsfiddle 中创建的，但我遇到了很多问题。 jsfiddle
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
div:not(#div0) {
display: none;
}
</style>
<script src="js_files/snippet-javascript-console.js"></script><style type="text/css">.as-console-wrapper { position: fixed; bottom: 0; left: 0; right: 0; max-height: 150px; overflow-y: scroll; overflow-x: hidden; border-top: 1px solid #000; display: none; }
.as-console { background: #e9e9e9; border: 1px solid #ccc; display: table; width: 100%; border-collapse: collapse; }
.as-console-row { display: table-row; font-family: monospace; font-size: 13px; }
.as-console-row:after { display: table-cell; padding: 3px 6px; color: rgba(0,0,0,.35); border: 1px solid #ccc; content: attr(data-date); vertical-align: top; }
.as-console-row + .as-console-row > * { border: 1px solid #ccc; }
.as-console-row-code { width: 100%; white-space: pre-wrap; padding: 3px 5px; display: table-cell; font-family: monospace; font-size: 13px; vertical-align: middle; }
.as-console-error:before { content: 'Error: '; color: #f00; }
.as-console-assert:before { content: 'Assertion failed: '; color: #f00; }
.as-console-info:before { content: 'Info: '; color: #00f; }
.as-console-warning:before { content: 'Warning: '; color: #e90 }
@-webkit-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-moz-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-ms-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
.as-console-row-code, .as-console-row:after { -webkit-animation: flash 1s; -moz-animation: flash 1s; -ms-animation: flash 1s; animation: flash 1s; }</style>
</head>
<body>
<script src="js_files/jquery.js"></script>
<a href="#" data-toggle="#div1">div1</a><br>
<div id="div1">div1 information</div>
<a href="#" data-toggle="#div2">div2</a>
<br>
<div id="div2">div2 information?</div>
<a href="#" data-toggle="#div3">div3</a>
<br>
<div id="div3">div3 information</div>
<a href="#" data-toggle="#div4">div4</a>
<br>
<div id="div4">div4</div>
<a href="#" data-toggle="#div5">div5</a>
<br>
<div id="div5">div5 information</div>
<a href="#" data-toggle="#div6">div6</a>
<br>
<div id="div6">div6 information</div>
<a href="#" data-toggle="#div7">div7</a><br>
<div id="div7">div7 information</div>
<script type="text/javascript">
$("a[data-toggle]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$("div").hide();
$(selector).show();
});
</script>
<div class="as-console-wrapper"><div class="as-console"></div></div></body></html>
这是来自 stackoverflow 的片段。
$("a[data-toggle]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$("div").hide();
$(selector).show();
});div:not(#div0) {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-toggle="#div1">div1</a><br>
<div id="div1">div1 information</div>
<a href="#" data-toggle="#div2">div2</a>
<br>
<div id="div2">div2 information?</div>
<a href="#" data-toggle="#div3">div3</a>
<br>
<div id="div3">div3 information</div>
<a href="#" data-toggle="#div4">div4</a>
<br>
<div id="div4">div4</div>
<a href="#" data-toggle="#div5">div5</a>
<br>
<div id="div5">div5 information</div>
<a href="#" data-toggle="#div6">div6</a>
<br>
<div id="div6">div6 information</div>
<a href="#" data-toggle="#div7">div7</a><br>
<div id="div7">div7 information</div>非常感谢!!!
最佳答案
如果您的 jQuery .toggle()/.show()/.hide() 方法在 Microsoft Dynamics CRM 2013 中不起作用，您可以单独使用 CSS 切换 div。
工作示例:
a {
display: block;
line-height: 36px;
cursor: pointer;
}
a + div {
display: none;
margin: -48px 0 12px;
padding-top: 48px;
}
div:target {
display: block;
}<a href="#div1">div1</a>
<div id="div1">div1 information</div>
<a href="#div2">div2</a>
<div id="div2">div2 information</div>
<a href="#div3">div3</a>
<div id="div3">div3 information</div>
<a href="#div4">div4</a>
<div id="div4">div4 information</div>
<a href="#div5">div5</a>
<div id="div5">div5 information</div>
<a href="#div6">div6</a>
<div id="div6">div6 information</div>
<a href="#div7">div7</a>
<div id="div7">div7 information</div>关于javascript - Toggle 在 Web 上工作但不在 CRM 2013 中工作的 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41655745/