对于我正在做的网站，我想加载一个div，并隐藏另一个，然后有两个按钮，将使用JavaScript在div之间切换视图。
这是我当前的代码
function replaceContentInContainer(target, source) {
document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
}
function replaceContentInOtherContainer(replace_target, source) {
document.getElementById(replace_target).innerHTML = document.getElementById(source).innerHTML;
}
<html>
<button onClick="replaceContentInContainer('target', 'replace_target')">View Portfolio</button>
<button onClick="replaceContentInOtherContainer('replace_target', 'target')">View Results</button>
<div>
<span id="target">div1</span>
</div>
<div style="display:none">
<span id="replace_target">div2</span>
</div>
替代div2的第二个函数没有工作，但第一个函数可以。
我发现了这个问题，最近我正在使用Vue.js实现一些ui，所以这可能是一个很好的替代方案。
首先，当您单击查看配置文件时，您的代码没有隐藏目标。您正在用div2覆盖内容目标。
let multiple = new Vue({
el: "#multiple",
data: {
items: [{
id: 0,
name: 'View Profile',
desc: 'Show profile',
show: false,
},
{
id: 1,
name: 'View Results',
desc: 'Show results',
show: false,
},
],
selected: '',
shown: false,
},
methods: {
showItem: function(item) {
if (this.selected && this.selected.id === item.id) {
item.show = item.show && this.shown ? false : !item.show;
} else {
item.show = (this.selected.show || !item.show) && this.shown ? true : !this.shown;
}
this.shown = item.show;
this.selected = item;
},
},
});
<div id="multiple">
<button type="button" v-for="item in items" v-on:click="showItem(item)">{{item.name}}</button>
<div class="" v-if="shown">: {{selected.desc}}</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>
我发现了这个问题，最近我正在使用Vue.js实现一些ui，所以这可能是一个很好的替代方案。
首先，当您单击查看配置文件时，您的代码没有隐藏目标。您正在用div2覆盖内容目标。
let multiple = new Vue({
el: "#multiple",
data: {
items: [{
id: 0,
name: 'View Profile',
desc: 'Show profile',
show: false,
},
{
id: 1,
name: 'View Results',
desc: 'Show results',
show: false,
},
],
selected: '',
shown: false,
},
methods: {
showItem: function(item) {
if (this.selected && this.selected.id === item.id) {
item.show = item.show && this.shown ? false : !item.show;
} else {
item.show = (this.selected.show || !item.show) && this.shown ? true : !this.shown;
}
this.shown = item.show;
this.selected = item;
},
},
});
<div id="multiple">
<button type="button" v-for="item in items" v-on:click="showItem(item)">{{item.name}}</button>
<div class="" v-if="shown">: {{selected.desc}}</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>
对于使用卤素的人，Purescript给出的答案是:
import CSS (display, displayNone)
import Halogen.HTML as HH
import Halogen.HTML.CSS as CSS
render state =
HH.div [ CSS.style $ display displayNone ] [ HH.text "Hi there!" ]
如果你“inspect element”，你会看到如下内容:
<div style="display: none">Hi there!</div>
但正如预期的那样，屏幕上将不会显示任何内容。
