Question

我试图寻找答案，但还没找到合适的答案。我必须用javascript做到这一点，所以不要给我任何jQuery答案。我的javascript技能也非常低，因为我刚开始学习它。

这是我必须做的：我有三个按钮，每个按钮都有一个div内的内容（所以有三个不同的div）。当网站第一次加载时，我只会看到第一个按钮的内容。如果我点击另一个按钮，我只会看到这个新按钮的内容，其他一切都必须消失（当然除了三个按钮）。

我试图在函数中使用document.getElementById("button1").style.visibility = "hidden";等等，但我仍然无法真正使用它，尤其是当我尝试将函数连接到html文档时。

任何提示？

Answer 1

希望以下帮助

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

Answer 2

刚刚在jsfiddle http://jsfiddle.net/6EGT2/上做了。首先创建一个显示和隐藏div的函数

function hideDiv(divid)
{
    document.getElementById(divid).style.visibility= 'hidden';
}

function showDiv(divid)
{
    hideDiv('div1');
    hideDiv('div2');
    hideDiv('div3');
    document.getElementById(divid).style.visibility = '';
}

现在是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>

Answer 3

一些注意事项：

您需要关注任何需要点击的click事件
单击时，您可以确定应显示哪个div。 visibility: hidden或display: none
确保在加载html元素后javascript正在执行，否则它将不会分配点击处理程序等。

Answer 4

这是使用普通javascript进行操作的一种方法，它使用每个按钮的公共代码，HTML和数据属性中没有javascript：

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：

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";
    });
}

工作演示：http://jsfiddle.net/jfriend00/rcDXX/

说明：

创建一个包含按钮的div。
创建包含各种内容区域的div。
创建显示/隐藏适当起始状态内容的CSS规则。
在每个按钮上放置一个数据属性，告诉您应该显示哪个内容区域，以便为所有按钮使用通用代码。
将所有按钮放入nodeList。
在每个按钮上设置单击事件处理程序。
在该点击处理程序中，获取应该为该按钮显示的内容ID。
通过将其样式设置为style.display = "none"
显示所需的内容区域。

仅供参考，这是使用辅助函数的代码的更高级版本：http://jsfiddle.net/jfriend00/aqMLt/

Answer 5

您似乎正在切换按钮的可见性而不是内容。您的内容div的ID是什么？

提供：

<div id="containerDiv">
    <div id="div1">blahblah</div>
    <div id="div2">blahblah</div>
    <div id="div3">blahblah</div>
</div>

然后只需将按钮设置为“toggleVisibility”之类的功能即可。我对此进行了测试，它将适用于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 );

使用javascript隐藏/显示元素

5 个答案: