对于我正在做的网站，我想加载一个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的第二个函数没有工作，但第一个函数可以。
使用方式:
<style type="text/css">
.hidden {
display: none;
}
.visible {
display: block;
}
</style>
在JavaScript中使用事件处理程序比在HTML中使用onclick=""属性更好:
<button id="RenderPortfolio_Btn">View Portfolio</button>
<button id="RenderResults_Btn">View Results</button>
<div class="visible" id="portfolio">
<span>div1</span>
</div>
<div class"hidden" id="results">
<span>div2</span>
</div>
JavaScript:
<script type="text/javascript">
var portfolioDiv = document.getElementById('portfolio');
var resultsDiv = document.getElementById('results');
var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
var resultsBtn = document.getElementById('RenderResults_Btn');
portfolioBtn.onclick = function() {
resultsDiv.setAttribute('class', 'hidden');
portfolioDiv.setAttribute('class', 'visible');
};
resultsBtn.onclick = function() {
portfolioDiv.setAttribute('class', 'hidden');
resultsDiv.setAttribute('class', 'visible');
};
</script>
jQuery可以帮助您轻松操作DOM元素!
我发现了这个问题，最近我正在使用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>
但正如预期的那样，屏幕上将不会显示任何内容。
