文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使用javascript使用按钮切换功能将html中的多个div替换为其他几个隐藏div

问如何使用javascript使用按钮切换功能将html中的多个div替换为其他几个隐藏div
EN

Stack Overflow用户
提问于 2015-12-31 20:08:25
回答 1查看 98关注 0票数 0

这些是我想要替换的div：

​

​

Html：

代码语言：javascript
复制
<div class="row" id="goodPageTopics">
    <div class="col-md-12 text-center">
        <ul class="list-unstyled text-center">
            <li class="filter btn btn-primary" data-filter="all">ALL</li>
            <li class="filter btn btn-primary" data-filter=".branding">POLITICS</li>
            <li class="filter btn btn-primary" data-filter=".design">ETHICS</li>
            <li class="filter btn btn-primary" data-filter=".development">MISCALULATIONS</li>
        </ul>
    </div>
    <div class="mix branding col-md-3">
        <div class="img-wrapper">
            <img class="img-responsive" src="images/projects/project1.png" />
            <a href="#project-1">
                <div class="img-info bg-primary">Click to see more info</div>
            </a>
        </div>
    </div>
    <div class="mix development col-md-3">
        <div class="img-wrapper">
            <img class="img-responsive" src="images/projects/project2.png" />
            <a href="#project-2">
                <div class="img-info bg-success">Click to see more info</div>
            </a>
        </div>
    </div>
    <div class="mix design col-md-3">
        <div class="img-wrapper">
            <img class="img-responsive" src="images/projects/project3.png" />
            <a href="#project-3">
                <div class="img-info bg-warning">Click to see more info</div>
            </a>
        </div>
    </div>
    <div class="mix branding col-md-3">
        <div class="img-wrapper">
            <img class="img-responsive" src="images/projects/project4.png" />
            <a href="#project-4">
                <div class="img-info bg-danger">Click to see more info</div>
            </a>
        </div>
    </div>
    <div class="mix design col-md-3">
        <div class="img-wrapper">
            <img class="img-responsive" src="images/projects/project5.png" />
            <a href="#project-5">
                <div class="img-info bg-info">Click to see more info</div>
            </a>
        </div>
    </div>
    <div class="mix seo col-md-3">
        <div class="img-wrapper">
            <img class="img-responsive" src="images/projects/project6.png" />
            <a href="#project-6">
                <div class="img-info bg-primary">Click to see more info</div>
            </a>
        </div>
    </div>
    <div class="mix design col-md-3">
        <div class="img-wrapper">
            <img class="img-responsive" src="images/projects/project7.png" />
            <a href="#project-7">
                <div class="img-info bg-success">Click to see more info</div>
            </a>
        </div>
    </div>
    <div class="mix seo col-md-3">
        <div class="img-wrapper">
            <img class="img-responsive" src="images/projects/project8.png" />
            <a href="#project-8">
                <div class="img-info bg-warning">Click to see more info</div>
            </a>
        </div>
    </div>
</div>

按钮是触发div被切换出去的原因，我已经做了其他div，但是我已经隐藏了它们，直到它们被需要时才会出现。

JavaScript：

代码语言：javascript
复制
document.getElementById('change-page').addEventListener('click', function () {
    toggle(document.querySelectorAll('.goodPageTopics'));
});

function toggle(elements, specifiedDisplay) {
    var element, index;

    elements = elements.length ? elements : [elements];
    for (index = 0; index < elements.length; index++) {
        element = elements[index];

        if (isElementHidden(element)) {
            element.style.display = '';

            // If the element is still hidden after removing the inline display
            if (isElementHidden(element)) {
                element.style.display = specifiedDisplay || 'block';
            }
        } else {
            element.style.display = 'none';
        }
    }

    function isElementHidden(element) {
        return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
    }
};

另外，对于主题的Nav使用数据过滤器来切换div，我不太确定它们是如何工作的，但是如果我对它们做了什么，那么如果有这样的信息，我将非常感激。

除此之外，我使用的是引导程序，并且愿意接受Jquery答案，但首选是JavaScript。

javascript
jquery
html
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-12-31 22:23:00

这里有几个问题。您还没有向我们展示按钮的html代码，但我在代码片段:D的buttom上做了一个名为"CHANGE“的测试。

二次

代码语言：javascript
复制
document.querySelectorAll('.goodPageTopics')); //is incorrect

在html中，goodPageTopics作为id而不是class

将上述行更改为

代码语言：javascript
复制
document.querySelectorAll('#goodPageTopics>*')

，最后这里是一个查看其他调整的片段，

​

代码语言：javascript
复制
document.getElementById('change-page').addEventListener('click', function () {
    toggle(document.querySelectorAll('#goodPageTopics>*'));
});

function toggle(elements, specifiedDisplay) {
    var element, index;

   elements = elements.length ? elements : elements;
   // console.log(elements);
    for (index = 0; index < elements.length; index++) {
        element = elements[index];
console.log(element,index);
            if(isElementHidden(element)) {
            console.log(isElementHidden(element));
                element.style.display = 'inline-block';
            }
        else {
            element.style.display = 'none';
        }
    }

    function isElementHidden(element) {
    // console.log(element);
    console.log(window.getComputedStyle(element, null).getPropertyValue('display') === 'none');
        return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
       
    }
};
代码语言：javascript
复制
.mix2{
display:none;
}
.mix1 {
  display:inline-block;
}
代码语言：javascript
复制
<div class="row" id="goodPageTopics">
    <div class="col-md-12 text-center">
        <ul class="list-unstyled text-center">
            <li class="filter btn btn-primary" data-filter="all">ALL</li>
            <li class="filter btn btn-primary" data-filter=".branding">POLITICS</li>
            <li class="filter btn btn-primary" data-filter=".design">ETHICS</li>
            <li class="filter btn btn-primary" data-filter=".development">MISCALULATIONS</li>
        </ul>
    </div>
    <div class="mix1">
        <div class="img-wrapper">
            <img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT4A9fe0YBJNZ7tPBy3k-oym1bS6U2wlEjmt8CLcS_DN3wBPsgZCg" />
            <a href="#project-1">
                <div class="img-info bg-primary">Click to see more info 1</div>
            </a>
        </div>
    </div>
    <div class="mix1">
        <div class="img-wrapper">
            <img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTRlxRebVidbrtuW7v9gT4VZgYPT7G3vSUuOnabGaLfUVKeYcSw" />
            <a href="#project-2">
                <div class="img-info bg-success">Click to see more info 2</div>
            </a>
        </div>
    </div>
    <div class="mix1">
        <div class="img-wrapper">
            <img class="img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU5tUsmZNqnT16dHtYc8WBqWUDXu3dOVOixYDBKBTThAuoU2hx" />
            <a href="#project-3">
                <div class="img-info bg-warning">Click to see more info 3</div>
            </a>
        </div>
    </div>
    <div class="mix1">
        <div class="img-wrapper">
            <img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTHr-vzSiowlKsNztwRWplAQnVch4hOZy6aUIKWaA89ank-_fd9gw" />
            <a href="#project-4">
                <div class="img-info bg-danger">Click to see more info 4</div>
            </a>
        </div>
    </div>
    <div class="mix1">
        <div class="img-wrapper">
            <img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQOArgeYK7H0JwbEGOQz5axbe7m1JIaty77MS0Z-Mdan-J8GYOX" />
            <a href="#project-5">
                <div class="img-info bg-info">Click to see more info 5</div>
            </a>
        </div>
    </div>
    <div class="mix2">
        <div class="img-wrapper">
            <img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS8OoyP1DLBzSPKpOJiIjUeVtahu67PdDfVtvP1BQJlAcdZiAUMSA" />
            <a href="#project-6">
                <div class="img-info bg-primary">Click to see more info 6</div>
            </a>
        </div>
    </div>
    <div class="mix2">
        <div class="img-wrapper">
            <img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" />
            <a href="#project-7">
                <div class="img-info bg-success">Click to see more info 7</div>
            </a>
        </div>
    </div>
    <div class="mix2">
        <div class="img-wrapper">
            <img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRS5otwxzHrKeXkcjTGIvgqr9RgIjty7RBDcAQu6MFlOn1K38ll" />
            <a href="#project-8">
                <div class="img-info bg-warning">Click to see more info 8</div>
            </a>
        </div>
    </div>
    <div>
    </div>
</div>
 <button type="submit" id='change-page'>
    CHANGE VIEW
    </button>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/34551169

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档