关于div标签的显示与隐藏

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于div标签的显示与隐藏相关的知识,希望对你有一定的参考价值。

参考技术A 如果用dreamweaver的话,这个是比较好实现的(如果不是,大概直接写JS代码也比较简单)。
在dreamweaver中,你加上下面的内容:
点击这个超链接
都要加上ID并且
的href="#"

把光标先放在那个DIV那里,点击“行为面板”,再选“改变属性”,“元素类型”选DIV,“元素ID”选ID选“DIV
”div1"”
在“属性”上选(或者自己写上)“display"
,在“新的值”上写上“none“
,点确定之后,选那个“事件”为“onload“(如果已经是这个了,就不用再选了)。
然后把光标放在那个
那里,和上面的一样,只是最后一个“新的值”要改成“block“
(写的时候不要加上引号,在这加上引号是为了方便阅读),选那个“事件”为“onclick“(如果已经是这个了,就不用再选了)。
这样应该行了,如果还是不会操作或不是用的dreamweaver的话,你再HI我好了。

Javascript:使用切换按钮隐藏和显示 div 标签

【中文标题】Javascript:使用切换按钮隐藏和显示 div 标签【英文标题】:Javascript: Hiding and Showing div tag with a toggle button 【发布时间】:2014-01-26 16:10:12 【问题描述】:

我会直接说:

我需要做的是通过按下一个按钮隐藏一个特定的 div,它应该是一个切换,所以基本上:按一次隐藏,再按一次显示,再按一次隐藏等等......

我希望在 CSS 中完成隐藏/显示规则并在纯 javascript 中完成交互(请不要使用 jquery)。好吧,这就是我需要做的,但我不太确定如何执行 javascript 代码。

html:

<p class="button">Show/hide<p>

<div> I want to hide this by pressing the button above</div>

css:

#showhide 
     display: none;


.button 
    display: block;
    height: 30px;
    width: 100px;
    background: green;
    text-align: center;
    padding-top: 10px;
    padding-left: 0px;
    font: 15px arial bold;
    border: 1px solid black;
    text-decoration: none;
    list-style:none;
    margin: 10px 0px 10px 0px;

http://jsfiddle.net/fyUJc/14/

另外,如果你觉得这个问题不属于这里或者很愚蠢,请尽量不要粗鲁,我只是想在这里学习。

【问题讨论】:

您可以在 div 中添加和删除一个类以显示/隐藏它。优秀的综述:***.com/questions/195951/… 用jquery你可以使用这个简单的函数.toggle() api.jquery.com/toggle 【参考方案1】:

您可以使用onclick 方法。将您的 HTML 设置为:

<p class="button" onclick="toggle_visibility('hideMe')">Show/hide</p>
<div id="hideMe">I want to hide this by pressing the button above</div>

并拥有以下 JavaScript:

function toggle_visibility(id) 

    var e = document.getElementById(id);
    if (e.style.display == 'block' || e.style.display=='')
    
        e.style.display = 'none';
    
    else 
    
        e.style.display = 'block';
    

DEMO

【讨论】:

【参考方案2】:

这里是您的代码的更新 JSFiddle,它适用于本机浏览器方法并实现一个简单的切换组件 - http://jsfiddle.net/fyUJc/31/

var button = document.querySelector('.button');
button.addEventListener('click', function(event) 
    var target = document.querySelector(button.getAttribute('data-target'));
    if (target.style.display == "none") 
        target.style.display = "block";
        button.innerHTML = button.getAttribute('data-shown-text');
     else 
        target.style.display = "none";
        button.innerHTML = button.getAttribute('data-hidden-text');
    
);

通过创建一个切换按钮,您将进入 GUI 领域,这是非常复杂的事情。

当前的浏览器技术没有提供一套丰富的工具来帮助您处理您需要在 GUI 中处理的所有事情。 jQuery 也无济于事,因为 GUI 更多的是处理组件和状态,而不是操作 DOM。

即使上面的代码在 Chrome 中工作,您仍然需要注意 DOM 和事件中的浏览器差异,并且您需要对组件进行更好的抽象。我的代码中有很多问题没有解决,如果您每次都从头开始编写它们,将很难正确解决。比如:

如何初始化页面上新添加的切换器? 如何同步 div 和按钮的状态? 如何扩展和插入按钮行为?

我强烈建议您研究为常见问题提供解决方案的 UI 相关库或框架。请参阅 ReactJS、Dojo 或 Sencha(例如 ExtJS)等等。寻找定义小部件/组件生命周期的框架以及扩展和定义自定义框架的方法。

浏览器技术只是没有为制作 UI 组件提供适当的抽象。

【讨论】:

【参考方案3】:

在您的 HTML 标记中使用“onclick”属性的替代解决方案:

<!DOCTYPE html>
    <html>
        <head>
           <script>
               function toggle()
                   var div = document.getElementById("divSection");
                   if (div.style.display =='block')
                       div.style.display = 'none';
                       return;
                   
                   div.style.display ='block';
             
           </script>
        </head>

        <body>
            <p>Click the button to trigger a function.</p>
            <p class="button" onclick="toggle()">Show/hide</p>
            <div id='divSection'> I want to hide this by pressing the button above</div>
        </body>
    </html>

希望对你有帮助。

【讨论】:

【参考方案4】:

您可以将事件侦听器添加到P 标签并调用Toggle() 函数来交换显示值,如下所示。

此处为示例 - JSFiddle

function Toggle() 
    var div = document.getElementsByTagName('div')[0];

    if (div.style.display == 'none') 
        div.style.display = 'block';
     else 
        div.style.display = 'none';
    


(function () 

    var button = document.querySelectorAll(".button");

    for (var i = 0; i < button.length; i++) 
        if (button[i].addEventListener) 
            button[i].addEventListener("click", function () 
                Toggle();
            );
         else 
            button[i].attachEvent("click", function () 
                Toggle();
            );
        
    
)();

尽管您最好将IDs 添加到您的元素中以使其更易于引用。

【讨论】:

以上是关于关于div标签的显示与隐藏的主要内容,如果未能解决你的问题,请参考以下文章

div隐藏和显示

div隐藏和显示

js中怎么控制一个标签的显示与隐藏

Javascript:使用切换按钮隐藏和显示 div 标签

如何实现js控制div的隐藏及显现

js jq 点击a标签 显示对应的div