的Javascript：隐藏和显示div标签切换按钮

，我需要做的就是隐藏一个按钮的按下一个特定的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/

另外，如果你认为这个问题不属于这里或者是愚蠢的，请尝试从粗鲁切莫，我只是想在这里学习。

来源

2014-01-08 Andrew P

你可以添加和删除一个类到div来显示/隐藏它。优秀的综合在这里：http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript –

与jQuery你可以使用这个简单的函数.toggle（）http：//api.jquery .COM /切换/ – user2167382

您可以使用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

来源

2014-01-08 14:06:54 tomsullivan1989

您可以添加附加一个事件监听器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你的元素，使它们更容易引用。

来源

2014-01-08 14:08:49 Jonathan

这里是你的代码的更新的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领域的切换按钮，这是一件很复杂。

当前的浏览器技术，不提供一套丰富的工具来帮助你，你需要在图形用户界面来处理一切。 jQuery也没有任何帮助，因为GUI更多地处理组件和状态而不是操作DOM。

即使上面的代码工作在Chrome中，你仍然需要照顾的两个DOM浏览器差异和事件，您将需要的组件了更好的抽象。在我的代码中有很多问题没有解决，如果你每次从头开始编写它们，将很难正确解决。诸如：

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

我强烈建议您查看UI相关的库或框架，为常见问题提供解决方案。请参阅ReactJS，Dojo或Sencha（例如ExtJS）等等。寻找定义Widget/Component生命周期的框架以及扩展和定义自定义生命周期的方法。

浏览器技术并没有提供正确的UI组件的抽象。

来源

2014-01-08 14:16:06 edzhelyov

另一种解决方案只是用 '的onclick' 的HTML标签中的属性：

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

我希望它能帮助。

来源

2014-01-08 14:42:57

的Javascript：隐藏和显示div标签切换按钮

回答

相关问题