無法使用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顯示屬性

回答

相關問題