Question

我正在尝试使用js更改div的显示属性，但它没有显示任何更改。

在Js代码中if语句没有变为真，但在css中所有属性都设置正确。请帮助我是新手，不理解这个问题。以下是我正在尝试的代码

我的HTML代码：

<!DOCTYPE html>
<html>
<head>
<script src="main.js" type="text/JavaScript"></script>
</head>
<body>
 <nav id="nav">
      <ul class="main_nav">
    <li id="About_me"><a href="#" onclick="About_Me_Sel()">About Me</a></li>
    <li id="home1"><a href="#" onclick="Home_Sel()">Home</a></li>
</ul>
</nav>
<div id="About">
<p>Hello</p>
</div>
<div id="home">
<p>hi</p>
</div>
</body>

我的JS代码：

function About_Me_Sel()
{
    var Id;
    Id =document.getElementById("About");
    if(Id.style.display == "block")
    {
    Id.style.display = "none";
    }
}

function Home_Sel()
{
var Id;
Id= document.getElementById("home");

if(Id.style.display == "none")
{Id.style.display = "block";
}
else
alert("hello");
}

Answer 1

第一次不行。 style属性未连接到样式表，因此JavaScript不知道您在那里设置了什么规则。 style属性反映了一个style属性，该属性被写入元素的标记中。（如果需要，可以将一个硬编码到HTML中。）因此，在设置之前，该值始终为空。

<强>之前

<div id="About">

<强>后

<div id="About" style="display: block">

尝试撤消条件

if (Id.style.display != "block")
{
    Id.style.display = "block";
}
else
{
    Id.style.display = "none";
}

Answer 2

我使用Ajax将其他内容加载到我的div中，我从其他php文件中获取内容。这样

function changecontent(name){

var htmlUrl = name;
$.ajax({
    url: htmlUrl,
    dataType: 'html',
    success: function(data) {


        console.log("Current page is: " + htmlUrl);


        $("#maincontent").fadeOut(function() {
            $(this).html(data).fadeIn("fast");
        });
    }
  });
 }

HTML：

<!DOCTYPE html>
<html>
<head>
  <script src="main.js" type="text/JavaScript"></script>
   </head>
      <body>
         <nav id="nav">
          <ul class="main_nav">
            <li id="About_me"><a href="#" onclick="changecontent("about_me.php")">About Me</a></li>
            <li id="home"><a href="#" onclick="changecontent("home_sel.php")">Home</a></li>
          </ul>
         </nav>
         <div id="maincontent">
              <p>Hello</p>
         </div>
        <div id="home">
      <p>hi</p>
    </div>
  </body>

eks：about_me.php

<a>I'awesome</a>

Answer 3

您的代码中有许多错误;我将尝试逐一介绍这些问题并提供解决方案，希望这些解决方案能够在未来更好地理解（和实践）。

首先，id“...为元素指定名称。此名称在文档中必须是唯一的。”¹。请注意'必须'，这意味着具有重复id的文档（多个元素共享相同的 id值会使文档无效，并导致JavaScript出现问题，因为它只会永远寻找带有给定id的一个元素，并从无效文档中恢复，结果不可预测。）

在这种情况下，我已经修改了id元素的div，有效地添加了Content字符串，并修改了id的{{1}} li元素为单个单词和小写，以便可以预测它们相互引用。这给出了以下HTML：

<nav id="nav">
    <ul class="main_nav">
        <li id="about"><a href="#" onclick="About_Me_Sel()">About Me</a></li>
        <li id="home"><a href="#" onclick="Home_Sel()">Home</a></li>
    </ul>
</nav>
<div id="aboutContent">
    <p>Hello</p>
</div>
<div id="homeContent">
    <p>hi</p>
</div>

JS Fiddle（这仍然无法正常工作，因为其他问题仍然存在;它只是为了显示已更正/修正的HTML）。

现在，JavaScript。

@jeffman在his answer中指出无法工作的原因是因为element.style仅引用元素的内嵌样式（那些设置为style属性），而不是使用样式表或文档头部设置的样式。这意味着您要将undefined变量与字符串进行比较，该字符串始终为false。

你也使用两个函数来做同样的事情，这是浪费和不必要的。这是我修改各种元素的id的第二个原因。修改（单个）函数来执行您想要执行的操作：

function sel(e, self) {
    // e is the click event,
    // self is the 'this' DOM node
    var id = self.parentNode.id,
        toggle = document.getElementById(id + 'Content'),
        display = toggle.style.display;
    toggle.style.display = display == 'block' ? 'none' : 'block';
}

上述内容需要a元素的以下HTML：

<a href="#" onclick="sel(event, this)">About Me</a>

JS Fiddle demo

现在，这个仍然需要突兀的JavaScript（在HTML本身内使用内联事件处理，每次你想要添加进一步的事件处理或更改要调用的函数时都需要更新在那些事件上）。因此，我建议采用更加不引人注目的版本，例如：

function sel(e, self) {
    // e is the click event,
    // self is the 'this' DOM node
    var id = self.parentNode.id,
        toggle = document.getElementById(id + 'Content'),
        display = toggle.style.display;
    toggle.style.display = display == 'block' ? 'none' : 'block';
}

var links = document.getElementById('nav').getElementsByTagName('a');

for (var i = 0, len = links.length; i < len; i++) {
    links[i].onclick = function (e){
        sel(e, this);
    };
}

JS Fiddle demo

现在，虽然这有效，但仍需要将事件处理程序分配给多个元素（尽管使用JavaScript本身的循环更容易完成）。

更简单的方法是将事件处理委托给父元素，并在函数本身中评估事件发生的位置。哪个会提供以下JavaScript：

function sel(e) {
    // e is the click event,
    // self is the 'this' DOM node
    var self = e.target,
        id = self.parentNode.id,
        toggle = document.getElementById(id + 'Content'),
        display = toggle.style.display;
    toggle.style.display = display == 'block' ? 'none' : 'block';
}

var nav = document.getElementById('nav');
nav.addEventListener('click', sel);

JS Fiddle demo

注意：

http://www.w3.org/TR/html401/struct/global.html#h-7.5.2。

参考文献：

无法使用javascript更改div显示属性

3 个答案: