对于我正在做的网站,我想加载一个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的第二个函数没有工作,但第一个函数可以。


当前回答

使用jQuery .toggle()可以轻松实现这一点。

$("#btnDisplay").click(function() {
  $("#div1").toggle();
  $("#div2").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
  First Div
</div>
<div id="div2" style="display: none;">
  Second Div
</div>
<button id="btnDisplay">Display</button>

其他回答

只是简单的函数需要实现显示/隐藏'div'使用JavaScript

<a id="morelink" class="link-more" style="font-weight: bold; display: block;" onclick="this.style.display='none'; document.getElementById('states').style.display='block'; return false;">READ MORE</a>


<div id="states" style="display: block; line-height: 1.6em;">
 text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here  
    <a class="link-less" style="font-weight: bold;" onclick="document.getElementById('morelink').style.display='inline-block'; document.getElementById('states').style.display='none'; return false;">LESS INFORMATION</a>
    </div>
<script type="text/javascript">
    function hide(){
        document.getElementById('id').hidden = true;
    }
    function show(){
        document.getElementById('id').hidden = false;
    }
</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>

使用方式:

<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元素!

对于使用卤素的人,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>

但正如预期的那样,屏幕上将不会显示任何内容。