10

基本上，我正在尝试创建一个链接，当按下该链接时，它将隐藏当前的 body div 标签并在其位置显示另一个，不幸的是，当我单击链接时，第一个 body div 标签仍然出现。这是HTML代码：

<div id="body">
    <h1>Numbers</h1>
</div>
<div id="body1">
    Body 1
</div>

这是CSS代码：

#body {
    height: 500px;
    width: 100%;
    margin: auto auto;
    border: solid medium thick;
}

#body1 {
    height: 500px;
    width: 100%;
    margin: auto auto;
    border: solid medium thick;
    display: hidden;
}

这是 JavaScript 代码：

function changeDiv() {
  document.getElementById('body').style.display = "hidden"; // hide body div tag
  document.getElementById('body1').style.display = "block"; // show body1 div tag
  document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked
}

注意：CSS 标签在不同的文件中声明

4

7 回答 7

33

你有没有尝试过

document.getElementById('body').style.display = "none";

代替

document.getElementById('body').style.display = "hidden";?

于 2013-03-06T23:50:18.333 回答
9

只需使用 jquery 事件列表器，单击事件。让链接的类是 lb ...我正在考虑将 body 作为 div 正如你所说的...

$('.lb').click(function() {
    $('#body1').show();
    $('#body').hide();
 });
于 2013-10-20T14:04:05.157 回答
4

使用以下代码：

function hide {
document.getElementById('div').style.display = "none";
}
function show {
document.getElementById('div').style.display = "block";
}
于 2013-05-19T17:34:23.517 回答
1

您可以使用 Js 功能隐藏/显示 Div。下面的示例

   <script>
        function showDivAttid(){

            if(Your Condition)
            {
             document.getElementById("attid").style.display = 'inline';
            }
            else
            {
            document.getElementById("attid").style.display = 'none';
            }

        }

    </script>

HTML - 显示/隐藏此文本

于 2015-04-28T10:20:31.620 回答
1

考虑使用jQuery. 生活更轻松：

$('body').hide(); $('body1').show();
于 2013-03-06T23:54:26.327 回答
1

将您的 HTML 设置为

 <div id="body" hidden="">
 <h1>Numbers</h1>
 </div>
 <div id="body1" hidden="hidden">
 Body 1
 </div>

现在将javascript设置为

     function changeDiv()
      {
      document.getElementById('body').hidden = "hidden"; // hide body div tag
      document.getElementById('body1').hidden = ""; // show body1 div tag
      document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; 
      // display text if JavaScript worked
       }

检查，它有效。

于 2016-03-16T11:21:12.877 回答
-3

试试你写 document.getElementById('id').style.visibility="hidden";

于 2015-01-18T20:34:49.550 回答