对于我正在做的网站,我想加载一个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元素!

其他回答

你可以隐藏/显示Div使用Js函数。下面的示例

<script>
    function showDivAttid(){

        if(Your Condition) {

            document.getElementById("attid").style.display = 'inline';
        }
        else
        {
            document.getElementById("attid").style.display = 'none';
        }
    }

</script>

HTML—

<div  id="attid" style="display:none;">Show/Hide this text</div>

你也可以使用jQuery JavaScript框架:

隐藏Div块

$(".divIDClass").hide();

显示Div块

$(".divIDClass").show();

我发现了这个问题,最近我正在使用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>

设置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
<script type="text/javascript">
    function hide(){
        document.getElementById('id').hidden = true;
    }
    function show(){
        document.getElementById('id').hidden = false;
    }
</script>