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

我想改变我的div使用js的显示属性，但它没有显示任何更改。无法使用javascript更改div显示属性

在Js代码中，如果语句在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"); 
}

来源

2013-08-19 Sanjana Porwal

你有两个不同的元素ID为'家' –

这不会解决在第一时间。 style属性没有连接到你的样式表，所以JavaScript不知道你在那里设置了什么规则。 style属性反映了写入元素标签的样式属性。（如果需要，可以将HTML硬编码到您的HTML中。）因此，在设置它之前，该值始终为空。

以前

<div id="About">

后

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

尝试扭转条件

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

来源

2013-08-19 23:09:19

我使用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>

来源

2013-08-19 23:27:15 Murillio4

你有一些代码中的错误的;我会逐个尝试通过它们来澄清这些问题并提供解决方案，希望这些解决方案有望在未来导致更好的理解（和实践）。

首先，id“...为元素指定名称，该名称在文档中必须是唯一的。。请注意，“必须”，这意味着有重复id（不止一个元素共享相同id有价票证，使文件无效，并导致问题的JavaScript，因为它只会不断找一个元素与给定id，并从无效的文档中恢复具有不可预知的结果）。

既然如此，我修改了id S中div元素的，有效的，添加Content字符串，并修订了id S中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。

你是也使用两个功能做同样的事情，这是浪费和不必要的。这是我修改各种元素的第二个原因。一种改进的（单）功能做你想做的事：

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。

参考文献：

来源

2013-08-20 07:24:11

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

回答

相关问题