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


当前回答

设置ID的样式属性:

显示隐藏的div

<div id="xyz" style="display:none">
     ...............
</div>
//In JavaScript

document.getElementById('xyz').style.display ='block';  // to display

隐藏所显示的div

<div id="xyz">
     ...............
</div>
//In JavaScript

document.getElementById('xyz').style.display ='none';  // to hide

其他回答

将HTML设置为

<div id="body" hidden="">
 <h1>Numbers</h1>
 </div>
 <div id="body1" hidden="hidden">
 Body 1
 </div>

现在将javascript设置为

function changeDiv()
  {
  document.getElementById('body').hidden = "hidden"; // hide body div tag
  document.getElementById('body1').hidden = ""; // show body1 div tag
  document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; 
  // display text if JavaScript worked
   }

只是简单的函数需要实现显示/隐藏'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>

使用方式:

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

我发现这个简单的JavaScript代码非常方便!

#<script type="text/javascript">
    function toggle_visibility(id) 
    {
        var e = document.getElementById(id);
        if ( e.style.display == 'block' )
            e.style.display = 'none';
        else
            e.style.display = 'block';
    }
</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>