Question

在尝试寻找这个问题的答案时，我可能一直在浏览错误的搜索词，但我找到的只是jQuery解决方案。

我想要实现的是通过单击不同的按钮，更改“容器”div的内容，并使用您单击按钮的相应div内容。

我觉得我的jsfiddle中的javascript是不够的，但我只能通过浏览得到它。

HTML

<div id="content">
<div id="work1" class="work">Content 1</div>
<div id="work2" class="work">Content 2</div>    
</div>

<input type="button" onclick="changeContent('work1');" value="work 1"/>
<input type="button" onclick="changeContent('work2');" value="work 2"/>

CSS

#content{
    height:500px;
    width:500px;
    border:1px solid #000;
}

的Javascript

function changeContent(){
document.getElementById('content').innerHTML = document.getElementByClassName('work');
}

我正在使用课程，因为我认为它会减少所需的javascript？

Answer 1

document.getElementByClassName('work');

原来是

document.getElementsByClassName('work'); // check the missing s

此返回实时节点列表。如果每个的ClassName都是唯一的，那么您可以直接使用第一个元素

document.getElementByClassName('work')[0].innerHTML;

最好还是在javascript中绑定事件，而不是分配内联事件属性。

Answer 2

function changeContent(id){
    var elems = document.getElementsByClassName('work');  //get elements with the class
    for (var i=0;i<elems.length;i++) {  //loop through them all
       elems[i].style.display = "none";  //set display to none to hide them
    }
    document.getElementById(id).style.display="block";  //find the element passed in and show it
}

Answer 3

如果我理解的是正确的，那么您正试图根据点击特定按钮来显示/隐藏内容

试试这个

<!DOCTYPE html>
<html>
<head>
<style>
#content{
    height:500px;
    width:500px;
    border:1px solid #000;
}

</style>
<script language = "javascript">

function showContent(value)
{
    if(value == 'work1'){
        document.getElementById('work2').style.visibility = "hidden";
        document.getElementById('work1').style.visibility = "visible";
    }
    else{
        document.getElementById('work2').style.visibility = "visible";
        document.getElementById('work1').style.visibility = "hidden";       
    }
}
</script>

</head>
<body>
<div id="content">
<div id="work1" class="work">Content 1</div>
<div id="work2" class="work">Content 2</div>    
</div>

<input type="button" onclick="showContent('work1');" value="show work 1"/>
<input type="button" onclick="showContent('work2');" value="show work 2"/>
</body>
</html>

使用其他div内容更改div内容

3 个答案: