如何使用js动态显示或隐藏DIV

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用js动态显示或隐藏DIV相关的知识,希望对你有一定的参考价值。

方法很多,最直观的就是用js控制div的display值,例如:

var div = document.getElementById('divID');
div.style.display = 'none';  // div隐藏
div.style.display = 'block';  // div显示

也可以写一段CSS,用CSS来控制div在视觉上隐藏,例如高度设为0、透明、溢出可视区等,还可以搭配CSS3的新属性来实现灵活多样的渐变动画效果,然后用JS来切换,例如:

.isHide height:0; overflow:hidden; opacity:0;

div.classList.add('isHide');  // div隐藏
div.classList.remove('isHide');  // div显示

还可以利用jQuery的hide()、show()、fadeIn、fadeOut、toggle等方法来实现类似效果。

参考技术A 最简单的方法,在div的style属性里面加上display:none;然后,如果需要显示就用element.show();隐藏就用 element.hide();

如何显示和隐藏在 vue js 中动态创建的 div(多格式选项卡结构)

【中文标题】如何显示和隐藏在 vue js 中动态创建的 div(多格式选项卡结构)【英文标题】:How to show and hide divs (multiform tab structure) created dynamically in vue js 【发布时间】:2020-03-26 17:36:52 【问题描述】:

我正在尝试以编程方式使用 Vue.js 创建一个选项卡式结构。我认为它应该通过动态显示选定的 div 并隐藏其余部分来工作 还有其他有效的方法吗?

【问题讨论】:

vuejs.org/v2/guide/conditional.html 我可以有 100-1000 个 div 如何在所有这些中使用 v-if 或 v-else-if? 你当然可以有这么多,但很遗憾我们在你的问题中看不到任何内容 【参考方案1】:

您可以在 div 上使用 v-ifv-show,然后您可以让它接受一个评估动态数据的函数,如下所示:

<div v-for="item of items">
   <div v-if="shouldDisplay(item)">item</div>
</div>
...
methods: 
   shouldDisplay(item)
      if (item...) //fulfils some condition
           return true
        else 
       return false
    

根据@Phils 的建议,您还可以将数组创建为计算属性,过滤掉您需要的内容:

computed: 
   filteredArray()
     return items.filter(item => //some condition)
    

【讨论】:

从你的模板执行方法是非常低效的。见vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods @Phil 您在动态生成数据时别无选择,另一种选择是创建 100-1000 个计算属性也不是很高效。 或者只是一个返回过滤数组的计算属性 很大程度上依赖于数据结构,是可以做到的,我个人在模板迭代中放一个方法的时候从来没有发现有什么滞后。 我理解这个 shouldDisplay(item) 并且我的条件是 onclick,就像我们在 jquery 中做的那样如何在 vue 中做到这一点。【参考方案2】:

我使用非常基本的 jquery 代码通过使用其唯一索引值调用函数并根据它们的 id 显示/隐藏它们来做到这一点:

   methods: 
        changeview(index)

            var id=Number(index)+Number(1);

            $( "#hotel"+id ).show();

            for( var i=0 ;i<this.location.length; i++)
                if(i!==id)

                    $( "#hotel"+i ).hide();
                
            
        ,

【讨论】:

以上是关于如何使用js动态显示或隐藏DIV的主要内容,如果未能解决你的问题,请参考以下文章

Vue js动态显示/隐藏div

js设置DIV显示时间并动态显示时间倒计时多少秒,倒计时完了之后该层自动隐藏。

js如何根据id删除数组数据,并动态更新这个div?

基于复选框动态显示和隐藏 Div 的 Javascript 函数

在 webgrid 中动态显示/隐藏列标题

vis.js 动态显示边缘