Question

我正在使用Microsoft Dynamics CRM 2013，并且正在尝试创建数据切换块，该块将根据选择的类别切换值。该列表有7个div，并且只应显示所选的div（即div 3），而不显示所有其他div。 html在浏览器中的功能就像一个魅力，但在CRM中却没有，这意味着当使用webresource将js，css和html添加到CRM 2013时，没有一个类别会切换。我不是开发人员，但需要弄清楚如何做到这一点。任何帮助是极大的赞赏！！这是输入CRM的整个html webresource 这是在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>

非常感谢!!!

Answer 1

如果您的jQuery .toggle() / .show() / .hide()方法无法在Microsoft Dynamics CRM 2013中使用，则可以仅使用CSS切换div。

工作示例：

＆＃13;

a {
display: block;
line-height: 36px;
cursor: pointer;
}

a + div {
display: none;
margin: -48px 0 12px;
padding-top: 48px;
}

div:target {
display: block;
}

＆＃13;

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

＆＃13;

切换在Web上工作但不在CRM 2013中工作的Div

1 个答案: