[英]Hide/show elements with javascript
I have tried to search for an answer but haven't quite yet found the right one. 我试图寻找答案,但还没有找到正确的答案。 And I must do this with javascript, so don't give my any jQuery answers.
而且我必须使用javascript做到这一点,所以不要给我任何jQuery答案。 My skills in javascript are also very low, since I've just begun to learn it.
由于我刚开始学习JavaScript,因此我的JavaScript技能也很低。
This is what I must do: I have three buttons, each one has its own content that's within a div (so three different divs that is). 这是我必须做的:我有三个按钮,每个按钮在div内都有自己的内容(因此是三个不同的div)。 When the site loads for the first time I shall only see content from the first button.
当网站首次加载时,我只能从第一个按钮看到内容。 If I click another button, I shall only see this new button's content and everything else must disappear (except the three buttons of course).
如果单击另一个按钮,则只能看到该新按钮的内容,其他所有内容都必须消失(当然,这三个按钮除外)。
I have tried to play around with document.getElementById("button1").style.visibility = "hidden";
我试图玩
document.getElementById("button1").style.visibility = "hidden";
within a function and so on, but I still can't really get it to work, especially when I try to connect the function to the html document. 在函数中等等,但是我仍然无法真正使它正常工作,尤其是当我尝试将函数连接到html文档时。
Any tips? 有小费吗?
Hope the below helps 希望以下内容能对您有所帮助
<button onclick="javascript:show(1)">One</button>
<button onclick="javascript:show(2)">Two</button>
<button onclick="javascript:show(3)">Three</button>
<div id="content1">content one</div>
<div id="content2" style="display:none">content two</div>
<div id="content3" style="display:none">content three</div>
<script>
function show(dv){
hideAll();
if(dv == '1'){
document.getElementById("content1").style.display = "block";
}else if(dv == '2'){
document.getElementById("content2").style.display = "block";
}else{
document.getElementById("content3").style.display = "block";
}
}
function hideAll(){
document.getElementById("content1").style.display = "none";
document.getElementById("content2").style.display = "none";
document.getElementById("content3").style.display = "none";
}
</script>
just did it on jsfiddle http://jsfiddle.net/6EGT2/ . 只是在jsfiddle http://jsfiddle.net/6EGT2/上完成的。 first create a function to show and hide divs
首先创建一个函数来显示和隐藏div
function hideDiv(divid)
{
document.getElementById(divid).style.visibility= 'hidden';
}
function showDiv(divid)
{
hideDiv('div1');
hideDiv('div2');
hideDiv('div3');
document.getElementById(divid).style.visibility = '';
}
now html: 现在HTML:
<input type='button' value ='button1' onclick='showDiv("div1")'>
<input type='button' value ='button2' onclick='showDiv("div2")'>
<input type='button' value ='button3' onclick='showDiv("div3")'>
<div id='div1'>content 1</div>
<div id='div2'>content 2</div>
<div id='div3'>content 3</div>
A few notes: 一些注意事项:
click
event on whatever needs to be clicked click
事件 visibility: hidden
or display: none
visibility: hidden
或display: none
Here's one way to do it with plain javascript that uses common code for each button, no javascript in your HTML and data attributes: 这是使用普通javascript的一种方法,该javascript对每个按钮使用通用代码,而HTML和data属性中没有javascript:
HTML: HTML:
<div id="buttonContainer">
<button data-content="content1">Content 1</button>
<button data-content="content2">Content 2</button>
<button data-content="content3">Content 3</button>
</div>
<div id="contentContainer">
<div id="content1">Showing Content 1</div>
<div id="content2">Showing Content 2</div>
<div id="content3">Showing Content 3</div>
</div>
Javascript: Javascript:
var buttons = document.querySelectorAll("#buttonContainer button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
var contentItem = this.getAttribute("data-content");
var contents = document.querySelectorAll("#contentContainer div");
for (var j = 0; j < contents.length; j++) {
contents[j].style.display = "none";
}
document.getElementById(contentItem).style.display = "block";
});
}
Working demo: http://jsfiddle.net/jfriend00/rcDXX/ 工作演示: http : //jsfiddle.net/jfriend00/rcDXX/
Explanation: 说明:
style.display = "none"
style.display = "none"
隐藏所有内容区域 FYI, here's a little more advanced version of the code that uses a helper function: http://jsfiddle.net/jfriend00/aqMLt/ 仅供参考,这是使用帮助程序功能的代码的更高级版本: http : //jsfiddle.net/jfriend00/aqMLt/
It seems like you're toggling the visibility of the button and not the content. 似乎您在切换按钮的可见性而不是内容。 What is the ID of your content div?
您的内容div的ID是什么?
provided: 提供:
<div id="containerDiv">
<div id="div1">blahblah</div>
<div id="div2">blahblah</div>
<div id="div3">blahblah</div>
</div>
Then just set the buttons to go to a function like "toggleVisibility". 然后只需设置按钮即可转到“ toggleVisibility”之类的功能。 I tested this and it will work from IE 5.5 and later, Firefox, Chrome 1.0 and Safari.
我对此进行了测试,它可以在IE 5.5和更高版本,Firefox,Chrome 1.0和Safari中运行。
function toggleVisibility( id ){
var containerDiv = document.getElementById("containerDiv");
var innerDivs = containerDiv.getElementsByTagName("DIV");
for(var i=0; i<innerDivs.length; i++)
{
if ( i == id ){
innerDivs[i].style.visibility = "visible";
innerDivs[i].style.display = "";
}
else{
innerDivs[i].style.visibility = "hidden";
innerDivs[i].style.display = "none";
}
}
}
toggleVisibility( 0 );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.